/* ==========================================================================
   Design tokens
   --------------------------------------------------------------------------
   Load order for the cascade. Declaring the layers up front means specificity
   never has to be fought with !important: `utilities` always beats
   `components`, which always beats `base`, regardless of selector weight.
   ========================================================================== */
@layer reset, tokens, base, components, utilities;

/* --------------------------------------------------------------------------
   Typography - self-hosted so the critical path holds no third-party round
   trips and the service worker can precache stable URLs. Latin subset only.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/barlow-400.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;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/barlow-600.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;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/barlow-700.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;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/barlow-condensed-600.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;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/barlow-condensed-700.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;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/barlow-condensed-800.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 {
    /* ------------------------------------------------------------------
       Raw palette. Every hex value in the design system lives here once;
       the semantic tokens below are the only thing components reference.
       ------------------------------------------------------------------ */
    --l-bg: #F1F1EF;
    --l-surface: #FFFFFF;
    --l-surface-2: #E6E7E5;
    --l-ink: #0F1215;
    --l-muted: #616875;
    --l-dim: #C7CACF;
    --l-border: #E3E5E8;
    --l-border-strong: #C7CACF;

    --d-bg: #0B0D11;
    --d-surface: #161A22;
    --d-surface-2: #252B36;
    --d-ink: #F3F4F6;
    --d-muted: #98A1AE;
    --d-dim: #3A4150;
    --d-border: #252B36;
    --d-border-strong: #3A4150;

    --red: #E5322D;
    --green: #2FB56A;
    --amber: #F2A93B;

    --heat-low: #3B7DD8;
    --heat-mid: var(--amber);
    --heat-mid-2: #E8892B;
    --heat-high: #E5322D;

    /* ------------------------------------------------------------------
       Semantic colour - light theme (the default).
       ------------------------------------------------------------------ */
    --bg: var(--l-bg);
    --surface: var(--l-surface);
    --surface-2: var(--l-surface-2);
    --ink: var(--l-ink);
    --ink-muted: var(--l-muted);
    --ink-dim: var(--l-dim);
    --border: var(--l-border);
    --border-strong: var(--l-border-strong);

    --accent: var(--red);
    --accent-ink: #FFFFFF;
    --live: var(--red);
    --ok: var(--green);
    --warn: var(--amber);
    --focus: var(--red);

    --heat-fill: linear-gradient(
      90deg, var(--heat-low), var(--heat-mid) 55%, var(--heat-high)
    );
    --scrim: rgb(255 255 255 / .92);

    --sh-1: 0 1px 2px rgb(0 0 0 / .08);
    --sh-2: 0 2px 8px rgb(0 0 0 / .10);
    --sh-pop: 0 8px 24px rgb(0 0 0 / .14);

    /* Fallback team accent, overridden per team in teams.css. */
    --team: var(--ink-muted);
    --team-ink: #FFFFFF;

    /* ---------------------------- space (4px base) -------------------- */
    --sp-1: .25rem;
    --sp-2: .5rem;
    --sp-3: .75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;
    --sp-16: 4rem;

    /* ---------------------------- radius ------------------------------ */
    --r-badge: 4px;
    --r-tab: 7px;
    --r-card: 10px;
    --r-card-lg: 12px;
    --r-card-xl: 14px;
    --r-pill: 999px;

    /* ---------------------------- type -------------------------------- */
    --font-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;

    --fs-100: .6875rem;   /* 11 */
    --fs-200: .75rem;     /* 12 */
    --fs-300: .8125rem;   /* 13 */
    --fs-400: .875rem;    /* 14 */
    --fs-500: 1rem;       /* 16 */
    --fs-600: 1.125rem;   /* 18 */
    --fs-700: 1.375rem;   /* 22 */
    --fs-800: 1.75rem;    /* 28 */
    --fs-900: 2.25rem;    /* 36 */
    --fs-hero: 3.5rem;    /* 56 */
    --fs-numeral: 7.5rem; /* 120 */

    --lh-tight: 1.05;
    --lh-snug: 1.2;
    --lh-normal: 1.45;

    --fw-400: 400;
    --fw-600: 600;
    --fw-700: 700;
    --fw-800: 800;

    --tr-tight: -.01em;
    --tr-1: .06em;
    --tr-2: .1em;
    --tr-3: .16em;

    /* ---------------------------- depth ------------------------------- */
    --z-rail: 1;
    --z-sticky: 10;
    --z-tabbar: 20;
    --z-overlay: 30;
    --z-toast: 40;

    /* ---------------------------- motion ------------------------------ */
    --dur-fast: 120ms;
    --dur: 200ms;
    --ease: cubic-bezier(.2, .7, .3, 1);

    /* ---------------------------- layout ------------------------------ */
    --page-max: 1200px;   /* grid surfaces: the slate, the feeds */
    --read-max: 56rem;    /* a single subject: one game */
    --prose-max: 720px;   /* long-form: notifications, errors */
    --page-pad: var(--sp-3);
    --tabbar-h: 3.5rem;
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-t: env(safe-area-inset-top, 0px);
  }

  /* --------------------------------------------------------------------
     Dark theme. Only the semantic mapping is restated - never a raw value,
     so the two blocks cannot drift apart in colour, only in coverage.
     Theme follows the OS; there is no in-app toggle by design.
     -------------------------------------------------------------------- */
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: var(--d-bg);
      --surface: var(--d-surface);
      --surface-2: var(--d-surface-2);
      --ink: var(--d-ink);
      --ink-muted: var(--d-muted);
      --ink-dim: var(--d-dim);
      --border: var(--d-border);
      --border-strong: var(--d-border-strong);

      --scrim: rgb(11 13 17 / .92);

      /* Shadows read as noise on a dark ground; deepen them instead. */
      --sh-1: 0 1px 2px rgb(0 0 0 / .32);
      --sh-2: 0 2px 8px rgb(0 0 0 / .40);
      --sh-pop: 0 8px 24px rgb(0 0 0 / .52);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --dur-fast: 0ms;
      --dur: 0ms;
    }
  }
}