/* ============================================================================
   chainline-tokens.css — the ONE canonical design token layer for ChainLine.
   Imported first by every surface (17 scorers, hub, overlay, club).
   A palette change is a single edit here that propagates everywhere.
   Visual source of truth: ChainLine Broadcast Graphics Package.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---- base palette ---- */
  --ink:         #150f08;
  --cream:       #efe2c8;
  --cream-dim:   #a8957a;                     /* solid measured muted text — 6.56:1 on --surface (was alpha → inconsistent contrast over varying bg) */
  --cream-faint: rgba(239, 226, 200, 0.2);   /* hairlines / non-text only */
  --surface:     #211810;
  --surface-2:   #2b2013;
  --maple:       #c79a5d;
  --maple-dim:   rgba(199, 154, 93, 0.22);    /* workhorse border */
  --maple-accent: var(--maple);               /* defines the token .btn-undo relied on (was undefined → undo bug) */
  --green:       #3bd87b;

  /* ---- red = serve / live / CTA ONLY — never a player identity ---- */
  --red:      #d8493b;   /* fills + large display text only */
  --red-deep: #b3392d;   /* solid-CTA fill (cream label clears AA) */
  --red-text: #ef6a5a;   /* red TEXT < 18px — ~6:1 on --ink (AA) */
  --on-red:   #2a0f0a;   /* label color on large red fills */

  /* ---- color-blind-safe per-player identity (Okabe-Ito basis; no pure black) ---- */
  --p1: #f2913b;   /* home — orange */
  --p2: #3d8fd6;   /* away — azure */

  /* ---- radius scale (collapses 13 ad-hoc values) ---- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* ---- spacing scale (4px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  /* ---- type scale ---- */
  --t-cap: 11px;
  --t-label: 12px;
  --t-body: 14px;
  --t-h3: 18px;
  --t-h2: 22px;
  --t-h1: 30px;

  /* ---- elevation: inner top-light highlight = lit maple, not flat brown ---- */
  --elev-1: inset 0 1px 0 rgba(255,242,214,.10), 0 1px 2px rgba(0,0,0,.4), 0 12px 30px -14px rgba(40,25,10,.55);
  --elev-2: inset 0 1px 0 rgba(255,242,214,.12), 0 2px 6px rgba(0,0,0,.45), 0 24px 50px -20px rgba(40,25,10,.6);
  --elev-3: inset 0 1px 0 rgba(255,242,214,.14), 0 4px 12px rgba(0,0,0,.5), 0 40px 80px -28px rgba(0,0,0,.65);

  /* ---- font stacks (metric-matched fallback below prevents scoreboard reflow on swap) ---- */
  --display: "Big Shoulders Display", "BSD-fallback", sans-serif;
  --ui: "Instrument Sans", "Inter", system-ui, sans-serif;
}

/* Metric-matched fallback so the giant score never jumps when the webfont swaps in. */
@font-face {
  font-family: "BSD-fallback";
  src: local("Arial Narrow"), local("Arial");
  size-adjust: 108%;
  ascent-override: 84%;
  descent-override: 18%;
  line-gap-override: 0%;
}

/* Broadcast numeral recipe — apply to every score / rating / rank / seed. */
.cl-num {
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: "zero" 1, "tnum" 1;
  letter-spacing: 0;
}

/* Score-bump on increment — guarded by reduced-motion. */
@keyframes clScoreBump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  70%  { transform: scale(0.96); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: no-preference) {
  .cl-bump { animation: clScoreBump 0.35s cubic-bezier(.36,.07,.19,.97); }
}

/* Global keyboard focus — every interactive surface, every app. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--maple);
  outline-offset: 2px;
}

/* Forced-colors (Windows high-contrast): restore system borders where rgba vanishes. */
@media (forced-colors: active) {
  .card, .panel, .btn, .pill, .modal, .nav, .footer { border: 1px solid CanvasText; }
  :where(a, button, input, select, textarea):focus-visible { outline: 2px solid Highlight; }
}