/*
 * Copyright (C) 2026 Jugendstil, SLU - All Rights Reserved
 *
 * Unauthorized copying of this file, via any medium is strictly prohibited. Proprietary and confidential.
 */

/*
 * Generated by weplay-design-tokens/generate.py from weplay-design-tokens/weplay.tokens.json.
 * Do not edit by hand: change the token file and regenerate.
 *
 * Only semantic tokens are emitted. The palette primitives in that file stay unexported on
 * purpose, so a page cannot reach past the semantic layer and pin itself to a raw colour.
 *
 * Theming. Custom properties inherit, so the light values on `:root` are what every element
 * gets unless something between it and the root says otherwise. `[data-theme]` can go on any
 * element, not just `:root`, which is what lets one page show a light and a dark example side
 * by side. The `:not([data-theme="light"])` guard is what stops the media query from overriding
 * an explicit opt-out of it.
 */

:root,
[data-theme="light"] {
  color-scheme: light;

  --wp-color-brand-primary: #0A66FF;
  --wp-color-brand-external-whatsapp: #25D366;
  --wp-color-brand-external-instagram-start: #833AB4;
  --wp-color-brand-external-instagram-middle: #FD1D1D;
  --wp-color-brand-external-instagram-end: #FCAF45;
  --wp-color-text-primary: #051224;
  --wp-color-text-secondary: #8E8E94;
  --wp-color-text-on-brand: #FFFFFF;
  --wp-color-text-on-danger: #FFFFFF;
  --wp-color-surface-base: #FFFFFF;
  --wp-color-surface-raised: #F2F2F7;
  --wp-color-surface-grouped: #F2F2F7;
  --wp-color-surface-grouped-raised: #FFFFFF;
  --wp-color-surface-grouped-elevated: #F2F2F7;
  --wp-color-surface-grouped-raised-elevated: #FFFFFF;
  --wp-color-surface-disabled: #E5E5EA;
  --wp-color-surface-icon-badge: #F2F2F2;
  --wp-color-surface-skeleton: rgb(142 142 147 / 0.15);
  --wp-color-surface-chip: rgb(142 142 147 / 0.15);
  --wp-color-border-subtle: #C6C6C8;
  --wp-color-control-track: #E5E5EA;
  --wp-color-material-glass: rgb(255 255 255 / 0.72);
  --wp-color-material-glass-border: rgb(0 0 0 / 0.08);
  --wp-color-feedback-success: #15803D;
  --wp-color-feedback-warning: #FEB42D;
  --wp-color-feedback-danger: #DC2626;
  --wp-color-match-side-a: #15803D;
  --wp-color-match-side-b: #DC2626;
  --wp-color-ranking-up: #15803D;
  --wp-color-ranking-down: #DC2626;
  --wp-color-chart-series-1: #007AFF;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --wp-color-brand-primary: #3D8BFF;
    --wp-color-brand-external-whatsapp: #25D366;
    --wp-color-brand-external-instagram-start: #833AB4;
    --wp-color-brand-external-instagram-middle: #FD1D1D;
    --wp-color-brand-external-instagram-end: #FCAF45;
    --wp-color-text-primary: #FFFFFF;
    --wp-color-text-secondary: #8E8E94;
    --wp-color-text-on-brand: #FFFFFF;
    --wp-color-text-on-danger: #FFFFFF;
    --wp-color-surface-base: #000000;
    --wp-color-surface-raised: #1C1C1E;
    --wp-color-surface-grouped: #000000;
    --wp-color-surface-grouped-raised: #1C1C1E;
    --wp-color-surface-grouped-elevated: #1C1C1E;
    --wp-color-surface-grouped-raised-elevated: #2C2C2E;
    --wp-color-surface-disabled: #2C2C2E;
    --wp-color-surface-icon-badge: #2C2C2E;
    --wp-color-surface-skeleton: rgb(142 142 147 / 0.15);
    --wp-color-surface-chip: rgb(142 142 147 / 0.15);
    --wp-color-border-subtle: #38383A;
    --wp-color-control-track: #2C2C2E;
    --wp-color-material-glass: rgb(20 20 22 / 0.72);
    --wp-color-material-glass-border: rgb(255 255 255 / 0.12);
    --wp-color-feedback-success: #4ADE80;
    --wp-color-feedback-warning: #FEB42D;
    --wp-color-feedback-danger: #DC2626;
    --wp-color-match-side-a: #4ADE80;
    --wp-color-match-side-b: #EF4444;
    --wp-color-ranking-up: #4ADE80;
    --wp-color-ranking-down: #EF4444;
    --wp-color-chart-series-1: #0A84FF;
  }
}

[data-theme="dark"] {
  color-scheme: dark;

  --wp-color-brand-primary: #3D8BFF;
  --wp-color-brand-external-whatsapp: #25D366;
  --wp-color-brand-external-instagram-start: #833AB4;
  --wp-color-brand-external-instagram-middle: #FD1D1D;
  --wp-color-brand-external-instagram-end: #FCAF45;
  --wp-color-text-primary: #FFFFFF;
  --wp-color-text-secondary: #8E8E94;
  --wp-color-text-on-brand: #FFFFFF;
  --wp-color-text-on-danger: #FFFFFF;
  --wp-color-surface-base: #000000;
  --wp-color-surface-raised: #1C1C1E;
  --wp-color-surface-grouped: #000000;
  --wp-color-surface-grouped-raised: #1C1C1E;
  --wp-color-surface-grouped-elevated: #1C1C1E;
  --wp-color-surface-grouped-raised-elevated: #2C2C2E;
  --wp-color-surface-disabled: #2C2C2E;
  --wp-color-surface-icon-badge: #2C2C2E;
  --wp-color-surface-skeleton: rgb(142 142 147 / 0.15);
  --wp-color-surface-chip: rgb(142 142 147 / 0.15);
  --wp-color-border-subtle: #38383A;
  --wp-color-control-track: #2C2C2E;
  --wp-color-material-glass: rgb(20 20 22 / 0.72);
  --wp-color-material-glass-border: rgb(255 255 255 / 0.12);
  --wp-color-feedback-success: #4ADE80;
  --wp-color-feedback-warning: #FEB42D;
  --wp-color-feedback-danger: #DC2626;
  --wp-color-match-side-a: #4ADE80;
  --wp-color-match-side-b: #EF4444;
  --wp-color-ranking-up: #4ADE80;
  --wp-color-ranking-down: #EF4444;
  --wp-color-chart-series-1: #0A84FF;
}

/* Dimensions and type do not vary by appearance. */
:root {
  --wp-radius-hero: 28px;
  --wp-radius-card: 16px;
  --wp-radius-control: 10px;
  --wp-radius-tile: 8px;
  --wp-radius-outline: 4px;
  --wp-radius-hairline: 2px;
  --wp-radius-full: 9999px;
  --wp-size-avatar: 42px;
  --wp-size-icon-badge: 36px;
  --wp-size-touch-target: 44px;
  --wp-space-xs: 4px;
  --wp-space-sm: 8px;
  --wp-space-md: 12px;
  --wp-space-lg: 16px;
  --wp-space-xl: 24px;
  --wp-space-2xl: 32px;

  --wp-font-family-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --wp-font-style-large-title: 700 34px/41px var(--wp-font-family-sans);
  --wp-font-style-title: 700 28px/34px var(--wp-font-family-sans);
  --wp-font-style-title-2: 700 22px/28px var(--wp-font-family-sans);
  --wp-font-style-title-3: 600 20px/25px var(--wp-font-family-sans);
  --wp-font-style-headline: 600 17px/22px var(--wp-font-family-sans);
  --wp-font-style-body: 300 15px/24px var(--wp-font-family-sans);
  --wp-font-style-callout: 400 16px/21px var(--wp-font-family-sans);
  --wp-font-style-subheadline: 400 15px/20px var(--wp-font-family-sans);
  --wp-font-style-footnote: 400 13px/18px var(--wp-font-family-sans);
  --wp-font-style-caption: 400 12px/16px var(--wp-font-family-sans);
  --wp-font-style-caption-2: 400 11px/13px var(--wp-font-family-sans);
}