/* ==========================================================================
   tokens.css — elclassi.co design tokens
   Editorial "almanac" look: warm paper surfaces, thin rules, strong hierarchy.
   Two team accents at EQUAL weight (Barça claret, Real navy), neutral grey for
   draws. Light + dark themes. All colours chosen for WCAG 2.2 AA.

   Theming model:
   - :root holds the LIGHT palette as the base.
   - @media (prefers-color-scheme: dark) applies the DARK palette by default.
   - [data-theme="light"] / [data-theme="dark"] on <html> force a theme and
     always win over the media query (the manual toggle), because an attribute
     selector on the same element is applied after and with equal specificity
     the later rule wins — we order the explicit-theme blocks last.
   ========================================================================== */

:root {
  /* ----- Brand reference (fixed, theme-independent) --------------------- */
  --brand-barca-claret: #a50044;
  --brand-barca-blue: #004d98;
  --brand-real-gold: #febe10;
  --brand-real-navy: #00529f;

  /* ----- Type families (self-hosted / system stacks, zero external) ----- */
  /* Serif display for headings (almanac feel). */
  --font-display: "Iowan Old Style", "Palatino Linotype", "Palatino",
    "Book Antiqua", Georgia, "Times New Roman", serif;
  /* Clean sans for body. */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
  /* Monospace with tabular numerals for all stats. */
  --font-mono: ui-monospace, "SF Mono", "SFMono-Regular", "Menlo",
    "Cascadia Mono", "Roboto Mono", Consolas, "Liberation Mono", monospace;

  /* ----- Type scale (modular ~1.2, rem-based) --------------------------- */
  --fs-xs: 0.75rem;   /* 12px */
  --fs-sm: 0.875rem;  /* 14px */
  --fs-base: 1rem;    /* 16px */
  --fs-md: 1.125rem;  /* 18px */
  --fs-lg: 1.333rem;  /* ~21px */
  --fs-xl: 1.777rem;  /* ~28px */
  --fs-2xl: 2.369rem; /* ~38px */
  --fs-3xl: 3.157rem; /* ~51px */

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.6;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ----- Spacing scale (4px base) --------------------------------------- */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* ----- Radius --------------------------------------------------------- */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* ----- Layout --------------------------------------------------------- */
  --container-max: 72rem;   /* ~1152px */
  --container-narrow: 46rem;
  --rule-width: 1px;
  --focus-width: 3px;

  /* ----- Motion --------------------------------------------------------- */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --ease: cubic-bezier(0.2, 0, 0.2, 1);

  /* ======================================================================
     LIGHT PALETTE (base)
     ====================================================================== */
  --bg: #faf8f4;          /* warm paper */
  --surface: #ffffff;     /* cards */
  --surface-2: #f3efe8;   /* subtle fills, table stripes, chips */
  --ink: #1a1613;         /* near-black warm text (~16:1 on --bg) */
  --ink-muted: #595249;   /* secondary text (~6.6:1 on --bg) */
  --ink-faint: #8a8176;   /* captions/placeholders (~3.3:1, large/non-text only) */
  --rule: #e4ddd1;        /* thin hairline rules */
  --rule-strong: #cdc4b4; /* stronger divider */
  --overlay: rgba(26, 22, 19, 0.45);

  /* Links: neutral slate (unbiased between the two clubs), underlined. */
  --link: #1f5673;        /* ~5.4:1 on --bg */
  --link-hover: #123c52;

  /* Focus ring: high-visibility, brand-neutral. */
  --focus: #0b5bd3;

  /* Team accents — EQUAL visual weight.
     *-fill   = large block colour (bars, badges); non-text contrast >= 3:1.
     *-ink    = accessible text colour on --bg / --surface (>= 4.5:1).
     *-soft   = tinted background for chips/highlights.
     *-on     = text colour that sits on top of *-fill (>= 4.5:1). */
  --barca-fill: #a50044;
  --barca-ink: #a50044;   /* claret on paper ~6.6:1 */
  --barca-soft: #f7e2ea;
  --barca-on: #ffffff;

  --real-fill: #00529f;
  --real-ink: #00529f;    /* navy on paper ~7.1:1 */
  --real-soft: #dfe9f5;
  --real-on: #ffffff;
  --real-gold: #febe10;   /* decorative stripe only; never text on light */

  --draw-fill: #6b7280;
  --draw-ink: #585e68;    /* ~4.9:1 */
  --draw-soft: #ebecee;
  --draw-on: #ffffff;

  /* Semantic status */
  --warn-ink: #8a5300;    /* coverage notes (~4.8:1 on --bg) */
  --warn-soft: #fbf0d8;
  --warn-rule: #e6c98a;

  /* Chart series (map to team accents + grid) */
  --chart-barca: var(--barca-fill);
  --chart-real: var(--real-fill);
  --chart-draw: var(--draw-fill);
  --chart-grid: var(--rule);
  --chart-axis: var(--ink-muted);

  /* Shadows (used sparingly — almanac prefers rules over boxes) */
  --shadow-sm: 0 1px 2px rgba(26, 22, 19, 0.06);
  --shadow-md: 0 6px 20px rgba(26, 22, 19, 0.10);
}

/* ==========================================================================
   DARK PALETTE
   Shared by prefers-color-scheme:dark AND [data-theme="dark"].
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15120f;          /* warm near-black */
    --surface: #201c18;
    --surface-2: #2a2520;
    --ink: #f0ebe3;         /* ~15:1 on --bg */
    --ink-muted: #b4ab9c;   /* ~7.6:1 */
    --ink-faint: #8a8173;   /* large/non-text */
    --rule: #352f28;
    --rule-strong: #4a4238;
    --overlay: rgba(0, 0, 0, 0.6);

    --link: #7fb8dc;        /* ~6.9:1 on --bg */
    --link-hover: #a9d2ec;

    --focus: #7fb8ff;

    /* Lighter brand variants so text/fills contrast on dark surfaces. */
    --barca-fill: #e24a7d;
    --barca-ink: #f27da0;   /* ~6.8:1 on --bg */
    --barca-soft: #3a1a26;
    --barca-on: #15120f;

    --real-fill: #3d8bdc;
    --real-ink: #6fb0ec;    /* ~7.0:1 on --bg */
    --real-soft: #16273a;
    --real-on: #15120f;
    --real-gold: #febe10;

    --draw-fill: #8b9199;
    --draw-ink: #9fa6ae;    /* ~6.5:1 */
    --draw-soft: #2b2f34;
    --draw-on: #15120f;

    --warn-ink: #e3b667;    /* ~7:1 on --bg */
    --warn-soft: #2d2413;
    --warn-rule: #5a4a22;

    --chart-grid: var(--rule-strong);
    --chart-axis: var(--ink-muted);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.5);
  }
}

/* ==========================================================================
   EXPLICIT THEME OVERRIDES (manual toggle) — declared LAST so they win over
   the media query regardless of the OS preference.
   ========================================================================== */

/* Force light even when the OS prefers dark. */
html[data-theme="light"] {
  --bg: #faf8f4;
  --surface: #ffffff;
  --surface-2: #f3efe8;
  --ink: #1a1613;
  --ink-muted: #595249;
  --ink-faint: #8a8176;
  --rule: #e4ddd1;
  --rule-strong: #cdc4b4;
  --overlay: rgba(26, 22, 19, 0.45);

  --link: #1f5673;
  --link-hover: #123c52;
  --focus: #0b5bd3;

  --barca-fill: #a50044;
  --barca-ink: #a50044;
  --barca-soft: #f7e2ea;
  --barca-on: #ffffff;

  --real-fill: #00529f;
  --real-ink: #00529f;
  --real-soft: #dfe9f5;
  --real-on: #ffffff;
  --real-gold: #febe10;

  --draw-fill: #6b7280;
  --draw-ink: #585e68;
  --draw-soft: #ebecee;
  --draw-on: #ffffff;

  --warn-ink: #8a5300;
  --warn-soft: #fbf0d8;
  --warn-rule: #e6c98a;

  --chart-grid: var(--rule);
  --chart-axis: var(--ink-muted);

  --shadow-sm: 0 1px 2px rgba(26, 22, 19, 0.06);
  --shadow-md: 0 6px 20px rgba(26, 22, 19, 0.10);
}

/* Force dark even when the OS prefers light. */
html[data-theme="dark"] {
  --bg: #15120f;
  --surface: #201c18;
  --surface-2: #2a2520;
  --ink: #f0ebe3;
  --ink-muted: #b4ab9c;
  --ink-faint: #8a8173;
  --rule: #352f28;
  --rule-strong: #4a4238;
  --overlay: rgba(0, 0, 0, 0.6);

  --link: #7fb8dc;
  --link-hover: #a9d2ec;
  --focus: #7fb8ff;

  --barca-fill: #e24a7d;
  --barca-ink: #f27da0;
  --barca-soft: #3a1a26;
  --barca-on: #15120f;

  --real-fill: #3d8bdc;
  --real-ink: #6fb0ec;
  --real-soft: #16273a;
  --real-on: #15120f;
  --real-gold: #febe10;

  --draw-fill: #8b9199;
  --draw-ink: #9fa6ae;
  --draw-soft: #2b2f34;
  --draw-on: #15120f;

  --warn-ink: #e3b667;
  --warn-soft: #2d2413;
  --warn-rule: #5a4a22;

  --chart-grid: var(--rule-strong);
  --chart-axis: var(--ink-muted);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.5);
}