/* ============================================================================
   StatLine (working name) — design tokens  ·  BUILD-READY (locked v2)
   Multi-sport live stats PWA. MiaMetrix family. Dark-first ("creative-suite").
   Author: Xeni. 2026-10-14. CANONICAL token source for Codi — build to these.

   Family resemblance (TPC / RuleCrosse): dark elevated shell + per-category
   accent monograms. Own identity: deep blue-charcoal base + ONE aqua signal hue.
   All contrast ratios documented + measured in design-system.md §3 (WCAG 2.1).

   SCOPE: wrap the whole app under the root id Codi chooses (spec assumes
   #statline). Never size .btn globally above a breakpoint (the TPC console-clip
   lesson). The wordmark is name-agnostic — swapping it is a one-line change.
   ============================================================================ */

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

  /* --- base / surfaces (deep blue-charcoal, elevated tiles) --- */
  --bg:         #0E1117;                 /* page base */
  --bg-grad:    radial-gradient(1200px 680px at 18% -8%, #1b2740 0%, #10141d 46%, #0b0d12 100%);
  --surface:    #161A24;                 /* panels, rails, dialogs, cards */
  --surface-2:  #1E2430;                 /* elevated tiles (stat, clock, count) */
  --surface-3:  #262E3C;                 /* hover / pressed-raise */
  --sunken:     #11141C;                 /* inputs, wells, stat wells */
  --line:       rgba(255,255,255,.09);   /* hairline (decorative) */
  --line-2:     rgba(255,255,255,.16);   /* stronger hairline / control border */
  --ctrl-border:#6E7A90;                 /* control outlines needing >=3:1 */
  --scrim:      rgba(8,10,14,.66);        /* dialog / sheet backdrop */

  /* --- ink --- */
  --ink:    #EEF2F8;                      /* primary text / numbers */
  --ink-2:  #C4CCDA;                      /* secondary */
  --muted:  #94A0B4;                      /* labels */
  --faint:  #8894AA;                      /* eyebrows, captions (large/bold only) */

  /* --- brand: the aqua signal (identity) --- */
  --brand:        #0EA5BE;                /* primary fill; pair with --on-brand */
  --brand-bright: #3FDCF0;                /* accents on dark: active nav, selected glow, focus */
  --on-brand:     #07222A;                /* ink ON a brand fill (6.6:1) */
  --focus:        #3FDCF0;                /* 2px focus ring, 2px offset */

  /* --- live / recording state --- */
  --live:   #37D9A0;                      /* running clock, recording dot, "on field" */

  /* --- status (readouts / flags; NEVER colour alone — pair with icon/text) --- */
  --ok:     #37D9A0;                      /* positive / complete / synced */
  --warn:   #F2C23A;                      /* reconcile warning / queued offline */
  --bad:    #FF6F7A;                      /* error / over-limit / sync failed */
  --info:   #5AA6FF;                      /* neutral informational */

  /* --- offline / sync status (semantic aliases of the above) --- */
  --sync-synced:  var(--ok);              /* dot + "Synced" */
  --sync-offline: var(--warn);            /* dot + "Offline · N queued" */
  --sync-syncing: var(--brand-bright);    /* dot + "Syncing…" (pulses) */
  --sync-error:   var(--bad);             /* dot + "Sync failed" */

  /* --- live-capture OUTCOME groups (the owner's SoloStats-style action grid) ---
     The Fast capture grid colours each action by its statDef.outcome, NOT by
     category. One solid-ish hue per outcome so the grid is glanceable on a
     sideline. Keep category accents for the Studio editor + dashboards. */
  --oc-earned:  var(--ok);                /* ace, kill, goal, made FG, steal, block */
  --oc-error:   var(--warn);              /* attack error, service error, turnover */
  --oc-fault:   var(--bad);               /* reception fault, card, foul */
  --oc-inrally: var(--muted);             /* neutral: attempt, dig, rebound, pass */

  /* --- per-category accent monograms (the signature; stat-model-driven) ---
     Assigned by the design's category->accent map (design-system.md §2),
     keyed on Mylo's free-text statDef.category. Unknown category => blue. */
  --cat-violet: #A78BFF;  --cat-violet-soft: rgba(167,139,255,.17); --cat-violet-line: rgba(167,139,255,.5);
  --cat-orange: #FF954A;  --cat-orange-soft: rgba(255,149,74,.16);  --cat-orange-line: rgba(255,149,74,.5);
  --cat-blue:   #5AA6FF;  --cat-blue-soft:   rgba(90,166,255,.16);  --cat-blue-line:   rgba(90,166,255,.5);
  --cat-green:  #3CCF92;  --cat-green-soft:  rgba(60,207,146,.16);  --cat-green-line:  rgba(60,207,146,.5);
  --cat-rose:   #FF6F7A;  --cat-rose-soft:   rgba(255,111,122,.16); --cat-rose-line:   rgba(255,111,122,.5);
  --cat-gold:   #F2C23A;  --cat-gold-soft:   rgba(242,194,58,.16);  --cat-gold-line:   rgba(242,194,58,.5);
  --cat-cyan:   #3FDCF0;  --cat-cyan-soft:   rgba(63,220,240,.15);  --cat-cyan-line:   rgba(63,220,240,.5);
  /* default when a category has no accent mapped */
  --cat: var(--cat-blue); --cat-soft: var(--cat-blue-soft); --cat-line: var(--cat-blue-line);

  /* --- radius --- */
  --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;

  /* --- elevation (locked scale; z-raise + shadow pair per level) --- */
  --e0: none;                                   /* flush: wells, inputs */
  --e1: 0 1px 3px rgba(0,0,0,.30);              /* resting cards / tiles */
  --e2: 0 2px 10px rgba(0,0,0,.35);             /* panels, scoreboard, sticky bars */
  --e3: 0 18px 44px rgba(0,0,0,.55);            /* dialogs, sheets, toasts */
  /* legacy aliases (do not remove — older specs reference them) */
  --shadow: var(--e2); --shadow-lg: var(--e3);

  /* --- motion --- */
  --tr:       .16s ease;                        /* default control transition */
  --tr-slow:  .28s cubic-bezier(.2,.7,.2,1);    /* sheet / dialog entrance */
  --pulse:    1.6s ease-in-out infinite;        /* live / syncing dot */

  /* --- z-index scale (locked) --- */
  --z-rail: 10; --z-topbar: 20; --z-sticky: 9; --z-toast: 60; --z-dialog: 70;

  /* --- type --- */
  --font-display: "Archivo", system-ui, sans-serif;   /* wordmark, H1, scoreboard */
  --font-text:    "Inter", system-ui, sans-serif;      /* everything else */
  --num:          "Inter", system-ui, sans-serif;      /* tabular numerics */

  /* --- type scale (locked; px to keep stat numbers exact & tabular) --- */
  --t-score:  40px;   /* scoreboard / clock, 800 tabular */
  --t-h1:     28px;   /* page H1, display 700, -.03em */
  --t-h2:     24px;   /* view header */
  --t-stat:   30px;   /* big tap-tile count, 800 tabular */
  --t-count:  28px;   /* dashboard number */
  --t-title:  17px;   /* card / dialog title */
  --t-panel:  13px;   /* panel titles, 700 */
  --t-body:   14px;   /* body / labels */
  --t-sm:     12px;   /* dense UI */
  --t-eyebrow:10px;   /* .14em uppercase eyebrow */

  /* --- spacing scale --- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;

  /* --- touch --- */
  --tap:    44px;     /* minimum interactive target on touch */
  --tap-lg: 56px;     /* primary live-entry tap tiles (counter stepper, pair MADE/MISS) */
}

[data-theme="light"] {
  color-scheme: light;
  --bg:         #F4F6FA;
  --bg-grad:    radial-gradient(1200px 680px at 18% -8%, #ffffff 0%, #eef2f8 48%, #e7ecf4 100%);
  --surface:    #FFFFFF;
  --surface-2:  #EEF2F8;
  --surface-3:  #E4EAF3;
  --sunken:     #F0F3F8;
  --line:       rgba(16,22,34,.10);
  --line-2:     rgba(16,22,34,.18);
  --ctrl-border:#8A93A5;
  --scrim:      rgba(16,22,34,.42);

  --ink:    #14181F;
  --ink-2:  #2E3745;
  --muted:  #566072;
  --faint:  #5E697B;

  --brand:        #0A6F7E;   /* deeper aqua (bright aqua fails on white) */
  --brand-bright: #0A6F7E;
  --on-brand:     #FFFFFF;
  --focus:        #0A6F7E;

  --live:   #0E9E73;
  --ok:     #0E9E73;
  --warn:   #8A5B00;
  --bad:    #C4333D;
  --info:   #2A69D6;

  --e1: 0 1px 3px rgba(16,22,34,.08);
  --e2: 0 2px 10px rgba(16,22,34,.10);
  --e3: 0 18px 44px rgba(16,22,34,.20);

  /* category accents keep their hue; soft/line tints lighten for white ground */
  --cat-violet-soft: rgba(124,92,214,.12); --cat-orange-soft: rgba(199,97,20,.12);
  --cat-blue-soft:   rgba(42,105,214,.12); --cat-green-soft:  rgba(14,158,115,.12);
  --cat-rose-soft:   rgba(196,51,61,.12);  --cat-gold-soft:   rgba(138,91,0,.12);
  --cat-cyan-soft:   rgba(10,111,126,.12);
}

/* ============================================================================
   DAYLIGHT — outdoor/sideline high-contrast mode (field sports in sunlight).
   Dark stays the indoor/brand default; a coach switches to Daylight at noon.
   Live capture must be glanceable in bright sun, so: white ground, near-black
   ink, and SOLID outcome-coloured action buttons (strong separation), with
   larger glanceable abbrs. Contrast targets in design-system.md §3.
   ============================================================================ */
[data-theme="daylight"] {
  color-scheme: light;
  --bg:#FFFFFF; --bg-grad:none; --surface:#FFFFFF; --surface-2:#EDEFF3; --surface-3:#DFE4EA; --sunken:#FFFFFF;
  --line:rgba(0,0,0,.24); --line-2:rgba(0,0,0,.46); --ctrl-border:#111; --scrim:rgba(0,0,0,.5);
  --ink:#000; --ink-2:#0E1216; --muted:#262B33; --faint:#2E333B;
  --brand:#055C68; --brand-bright:#055C68; --on-brand:#FFFFFF; --focus:#003A42; --live:#07663A;
  --ok:#07663A; --warn:#8A4B00; --bad:#B3121F; --info:#0B48C0;
  --e1:0 1px 2px rgba(0,0,0,.18); --e2:0 2px 8px rgba(0,0,0,.22); --e3:0 16px 40px rgba(0,0,0,.3);
  /* outcome fills stay saturated for white-on-colour buttons (>=4.5:1 at the
     button's bold abbr size); Codi applies the solid-fill rule on .oact. */
  --oc-earned:var(--ok); --oc-error:var(--warn); --oc-fault:var(--bad); --oc-inrally:var(--muted);
}