/* Design tokens — generated from DESIGN.md by bin/sync-design-tokens.
 * DO NOT edit by hand — your changes will be overwritten. Edit DESIGN.md
 * frontmatter instead, then run bin/sync-design-tokens.
 */

/* Oswald — titles (Latin Extended + Latin) */
@font-face {
  font-family: Oswald;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/oswald-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: Oswald;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/oswald-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Manrope — body (Latin Extended + Latin) */
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/manrope-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@layer tokens {
  :root {
    /* Typography */
    --font-title: Oswald, sans-serif;
    --font-body: Manrope, sans-serif;
    --font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* Brand identity (theme-invariant) */
    --color-accent: #00ff87;
    --color-accent-secondary: #00d4ff;
    --color-live: #ef4444;
    --color-purple: #a855f7;
    --color-indigo: #7986cb;

    /* Surface & text — default theme baseline (overrides in themes.css) */
    --color-bg: #0a0a0b;
    --color-surface: #111113;
    --color-surface-hover: #1a1a1d;
    --color-surface-active: #1e1e21;
    --color-surface-sunken: #16161a;
    --color-text: #ffffff;
    --color-text-secondary: #e4e4e7;
    --color-text-muted: #a1a1aa;
    --color-text-subtle: #71717a;
    --color-text-disabled: #52525b;
    --color-border: #27272a;

    /* On-brand foreground (theme-invariant — sit on fixed brand fills) */
    --color-on-accent: #000000;
    --color-on-live: #ffffff;

    /* Computed/effect values — preserved tail (rgba/oklch not in spec schema yet) */
    --color-border-subtle: rgb(255 255 255 / 6%);
    --color-surface-border: rgb(255 255 255 / 8%);
    --color-overlay: rgb(0 0 0 / 80%);
    --color-on-accent-muted: rgb(0 0 0 / 60%);
    --color-accent-fg: #00ff87;
    --color-chat-nick-1: #38bdf8;
    --color-chat-nick-2: #ffd34d;
    --color-chat-nick-3: #4ade80;
    --color-chat-nick-4: #c084fc;
    --color-chat-nick-5: #fb923c;

    /* Semantic match/result colors (theme-invariant) */
    --color-win: #22c55e;
    --color-draw: #6b7280;
    --color-loss: #ef4444;
    --color-yellow-card: #fbbf24;

    /* Semantic warning / success / card / trophy colors (theme-invariant) */
    --color-warning: #fbbf24;
    --color-warning-strong: #f59e0b;
    --color-success: #22c55e;
    --color-card-red: #ef4444;
    --color-card-yellow: #fbbf24;
    --color-gold-1: #ffd700;
    --color-gold-2: #facc15;

    /* Player rating scale */
    --color-rating-elite: #ffd700;
    --color-rating-excellent: #ffc107;
    --color-rating-very-good: #00ff87;
    --color-rating-good: #22c55e;
    --color-rating-above-avg: #84cc16;
    --color-rating-avg: #c084fc;
    --color-rating-below-avg: #f97316;
    --color-rating-poor: #f87171;

    /* Standings qualification zones */
    --color-zone-champions: #3b82f6;
    --color-zone-cl-playoff: #f59e0b;
    --color-zone-europa: #f97316;
    --color-zone-conference: #22c55e;
    --color-zone-relegation: #ef4444;
    --color-zone-promotion: #16a34a;
    --color-zone-promotion-playoff: #84cc16;

    /* Prediction accuracy */
    --color-prediction-hit: #a8ff3e;
    --color-prediction-hit-fg: #a8ff3e;
    --color-prediction-miss: #ff6b6b;
    --color-prediction-miss-fg: #ff8989;

    /* Porra del Mundial 2026 campaign palette (theme-invariant) */
    --color-porra-magenta: #e8195b;
    --color-porra-purple: #4a0e8f;
    --color-porra-purple-light: #b794f4;
    --color-porra-cyan: #00c8f5;
    --color-porra-gold: #ffd34d;
    --color-porra-gold-light: #fff5b8;
    --color-porra-gold-dark: #c98a14;
    --color-porra-silver: #c7cad1;
    --color-porra-bronze: #cd7f32;

    /* Spacing scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* Layout primitives */
    --content-max-width: 480px;
    --header-height: 56px;
    --nav-height: 56px;
    --touch-target: 44px;
    --shell-max-width-laptop: 1280px;
    --shell-max-width-wide: 1452px;
    --shell-sidebar-left: 240px;
    --shell-sidebar-right-laptop: 280px;
    --shell-sidebar-right-wide: 320px;
    --shell-gap-laptop: 24px;
    --shell-gap-wide: 32px;
    --shell-padding-inline: 16px;
    --space-card-padding-desktop: 20px;
    --text-hero-score-desktop: 4rem;
    --text-hero-title-desktop: 2.5rem;
    --text-hero-figure-desktop: 3rem;
    --hero-carousel-height: 380px;
    --hero-carousel-gap: 16px;
    --hero-carousel-radius: 16px;
    --progress-pill-diameter: 8px;
    --progress-pill-active-width: 32px;
    --progress-pill-gap: 8px;

    /* Radii ladder */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 30%);
    --shadow-md: 0 4px 6px rgb(0 0 0 / 40%);
    --shadow-lg: 0 8px 24px rgb(0 0 0 / 50%);
    --shadow-toast: 0 4px 24px rgb(0 0 0 / 40%);

    /* Motion */
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  }
}