/* ==========================================================================
   BALLER FUSION — DESIGN TOKENS  ("Stadium Editorial")
   Single source of truth. Loaded BEFORE styles.css.
   Legacy token names are aliased to the new role tokens so existing
   component CSS in styles.css keeps resolving during the migration.
   ========================================================================== */

:root {
  /* --- Brand constants (theme-independent) --- */
  --pitch:              #16a34a;   /* committed green — structural accent */
  --pitch-deep:         #0e7a37;   /* pressed / active */
  --pitch-bright:       #22c55e;   /* legacy bright green, used sparingly */
  --pitch-tint:         color-mix(in oklab, var(--pitch) 14%, transparent);
  --pitch-tint-strong:  color-mix(in oklab, var(--pitch) 22%, transparent);
  --chalk:              #f4f4ed;   /* warm pitch-line white */
  --whistle:            #facc15;   /* ratings / stars only */
  --card-red:           #e23b3b;   /* discounts / red card */
  --accent-blue:        #3b82f6;   /* legacy, rare */

  /* --- Typography --- */
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-heading: var(--font-display);   /* legacy alias */

  --label:   0.72rem;                                    /* uppercase kicker */
  --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.85rem);
  --step-0:  clamp(0.95rem, 0.92rem + 0.15vw, 1rem);
  --step-1:  clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  --step-2:  clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem);
  --step-3:  clamp(2.4rem, 1.7rem + 3vw, 4rem);
  --display: clamp(3.5rem, 2rem + 9vw, 9rem);            /* hero thesis */

  /* --- Spacing rhythm (intentionally uneven) --- */
  --s-1:0.25rem; --s-2:0.5rem; --s-3:0.75rem; --s-4:1rem; --s-5:1.5rem;
  --s-6:2rem;    --s-7:3rem;   --s-8:4.5rem;  --s-9:7rem; --s-10:10rem;

  /* --- Radii (crisp, editorial) --- */
  --r-sm:4px; --r-md:8px; --r-lg:12px; --r-pill:999px; --r-card:10px;

  /* --- Easing & timing --- */
  --ease-out:    cubic-bezier(.22,1,.36,1);
  --ease-inout:  cubic-bezier(.65,0,.35,1);
  --ease-spring: linear(0, .18, .5, .78, .93, .99, 1);   /* spring, bounce:0 */
  --t-fast:120ms; --t-ui:200ms; --t-enter:280ms; --t-slow:420ms;

  /* --- Z-index scale --- */
  --z-base:0; --z-raised:10; --z-sticky:100; --z-nav:1000; --z-drawer:1100;
  --z-overlay:2000; --z-toast:3000; --z-max:9999;
}

/* ==========================================================================
   DARK — "floodlit night match"
   ========================================================================== */
html[data-theme="dark"] {
  --ink:         #f5f3ee;
  --ink-2:       #b8b4ab;
  --ink-3:       #76726a;
  --base:        #0c0d0b;
  --base-2:      #131613;
  --surface:     #1b1e1a;
  --surface-2:   #232722;
  --line:        rgba(244,244,237,0.10);
  --line-strong: rgba(244,244,237,0.18);
  --field:       rgba(244,244,237,0.04);

  --shadow-1: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px rgba(0,0,0,.22);
  --shadow-2: 0 2px 4px rgba(0,0,0,.34), 0 8px 18px rgba(0,0,0,.30);
  --shadow-3: 0 4px 10px rgba(0,0,0,.38), 0 18px 44px rgba(0,0,0,.42);
  --shadow-pitch: 0 6px 22px color-mix(in oklab, var(--pitch) 34%, transparent);

  /* legacy aliases -> roles */
  --bg-primary: var(--base);
  --bg-secondary: var(--base-2);
  --glass-bg: var(--surface);
  --glass-border: var(--line);
  --glass-blur: blur(0px);
  --text-primary: var(--ink);
  --text-secondary: var(--ink-2);
  --text-muted: var(--ink-3);
  --navbar-bg: color-mix(in oklab, var(--base) 86%, transparent);
  --card-shadow: var(--shadow-2);
  --input-bg: var(--field);
  --input-border: var(--line);
  --table-row-alt: rgba(244,244,237,0.03);
  --badge-bg: rgba(244,244,237,0.08);
  --divider: var(--line);
  --scrollbar-thumb: #2f332e;
  --scrollbar-track: var(--base-2);
  --btn-ghost-border: var(--line-strong);
  --hover-overlay: rgba(244,244,237,0.05);
  --accent-green: var(--pitch);
  --accent-red: var(--card-red);
  --accent-amber: var(--whistle);
}

/* ==========================================================================
   LIGHT — "matchday programme"
   ========================================================================== */
html[data-theme="light"] {
  --ink:         #15170f;
  --ink-2:       #4a4d43;
  --ink-3:       #87897e;
  --base:        #eceae1;
  --base-2:      #e2e0d6;
  --surface:     #f6f5ee;
  --surface-2:   #ffffff;
  --line:        rgba(21,23,15,0.10);
  --line-strong: rgba(21,23,15,0.16);
  --field:       rgba(21,23,15,0.04);

  --shadow-1: 0 1px 2px rgba(21,23,15,.08), 0 2px 6px rgba(21,23,15,.06);
  --shadow-2: 0 2px 4px rgba(21,23,15,.10), 0 8px 18px rgba(21,23,15,.08);
  --shadow-3: 0 4px 10px rgba(21,23,15,.10), 0 18px 44px rgba(21,23,15,.12);
  --shadow-pitch: 0 6px 22px color-mix(in oklab, var(--pitch) 26%, transparent);

  --bg-primary: var(--base);
  --bg-secondary: var(--base-2);
  --glass-bg: var(--surface);
  --glass-border: var(--line);
  --glass-blur: blur(0px);
  --text-primary: var(--ink);
  --text-secondary: var(--ink-2);
  --text-muted: var(--ink-3);
  --navbar-bg: color-mix(in oklab, var(--base) 84%, transparent);
  --card-shadow: var(--shadow-2);
  --input-bg: var(--field);
  --input-border: var(--line);
  --table-row-alt: rgba(21,23,15,0.03);
  --badge-bg: rgba(21,23,15,0.06);
  --divider: var(--line);
  --scrollbar-thumb: #c7c5ba;
  --scrollbar-track: var(--base-2);
  --btn-ghost-border: var(--line-strong);
  --hover-overlay: rgba(21,23,15,0.04);
  --accent-green: var(--pitch);
  --accent-red: var(--card-red);
  --accent-amber: var(--whistle);
}