/*
  Golden Hour Court — design tokens.
  Dark is the hero theme; light ("Paper Court") is a first-class high-contrast alternative.
  All text/background pairs were verified against WCAG AA (see Prompt/redesign/ui-spec.md §10).
  Legacy names (--bg, --surface, --raised, --sunken, --text*, --accent, --success, --control*,
  --space-*, --radius-*) are kept so every view keeps working.
*/

:root {
  /* ---------- Palette primitives ---------- */
  --ink-950: #080a07;
  --ink-900: #0d110b;
  --ink-850: #131810;
  --ink-800: #1a2015;
  --ink-700: #252d1e;
  --olive-600: #3f5218;
  --olive-500: #5b7025;
  --olive-300: #a9be73;
  --olive-200: #c9d8a0;
  --olive-100: #dfe7c4;
  --cream-50: #fbf9ef;
  --cream-100: #f4f1e4;
  --cream-200: #e8e4d2;
  --cream-300: #d6d1ba;
  --lime-400: #d7f73a;
  --lime-300: #e6fb7a;
  --lime-600: #9bb812;
  --sun-400: #ffb04a;
  --sun-500: #ff8a3d;
  --ember-500: #ff5a36;
  --time-up: #d01818;
  --critical-ring: #ff3b1f; /* R4-15: the last-30 s ring and pulse (rings/glows only, never a text fill) */
  /* R4-15: white on the red / black timer states - three steps only. */
  --on-red-soft: rgba(255, 255, 255, 0.14);
  --on-red-line: rgba(255, 255, 255, 0.3);
  --on-red-line-strong: rgba(255, 255, 255, 0.6);
  --nav-line: rgba(244, 241, 228, 0.1); /* the rail is always dark */
  --nav-active-bg: rgba(215, 247, 58, 0.1);
  --accent-glow: rgba(215, 247, 58, 0.25);
  /* R4-27: shadow tokens beyond the three elevations. */
  --shadow-accent: 0 8px 26px var(--accent-glow);
  --shadow-control: 0 6px 18px rgba(0, 0, 0, 0.25);
  --dur-breathe: 2s;
  /* ---------- CSS icons (R4-05) ----------
     The same paths as js/icons.js. A background/mask image cannot use non-scaling strokes, so
     each stroke-width here is pre-scaled for the size it is drawn at, to render the family's
     two weights: 1.75px regular, 2.25px emphasis (width = weight x 24 / drawn px). */
  --icon-arrow-ur: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d7f73a' stroke-width='2.45' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17L17 7M8.5 7H17v8.5'/></svg>");        /* nub arrow, drawn 22px, lime */
  --icon-arrow-ur-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.45' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17L17 7M8.5 7H17v8.5'/></svg>");                  /* 22px */
  --icon-check-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>");                     /* 12px */
  --icon-plus-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.375' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14M5 12h14'/></svg>");                     /* 16px */
  --icon-warn-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M12 4l9 16H3L12 4zM12 10v4.5M12 17.4h.01'/></svg>");                      /* 24px */
  --icon-sound-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.625' stroke-linecap='round' stroke-linejoin='round'><path d='M4 9.5v5h3.5L12 18.5v-13L7.5 9.5H4z' fill='black'/><path d='M15.5 9a4 4 0 0 1 0 6M18 6.5a7.5 7.5 0 0 1 0 11'/></svg>");                     /* 16px */
  --icon-sound-off-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.625' stroke-linecap='round' stroke-linejoin='round'><path d='M4 9.5v5h3.5L12 18.5v-13L7.5 9.5H4z' fill='black'/><path d='M16 9.5l5 5M21 9.5l-5 5'/></svg>");              /* 16px */
  --icon-alarm: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d01818' stroke-width='1.62' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='13' r='7.5'/><path d='M12 9v4.2l2.6 1.6M4 5.5l3-2.5M20 5.5L17 3'/></svg>");            /* 26px, time-up red */
  --icon-alarm-sm: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d01818' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='13' r='7.5'/><path d='M12 9v4.2l2.6 1.6M4 5.5l3-2.5M20 5.5L17 3'/></svg>");          /* 20px */

  --flash-yellow: #ffe600;

  /* ---------- Type ---------- */
  --font-family-sans: 'Urbanist', 'Avenir Next', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-family-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* R4-06: one type scale. Four mono styles and the sans UI steps; nothing informational
     under 12px, no half pixels. Every font-size in styles/ resolves to one of these. */
  /* mono */
  --t-micro: 12px;       /* 700, caps, --track-caps: kickers, table heads, status tags, link buttons */
  --t-label: 13px;       /* 500-600, sentence case: data and meta lines */
  --t-data: 14px;        /* 500-600: table numerics (record, PF-PA) */
  --t-kicker-lg: 18px;   /* timer takeover kicker and Call "of 5": the only large mono */
  /* sans UI */
  --t-hint: 14px;
  --t-body: 16px;
  --t-btn: 17px;
  --t-body-lg: 18px;     /* list rows */
  --t-lead: 20px;        /* lead text, team names (Compact) */
  --t-section: 22px;
  --t-title-sm: 24px;    /* titles on Compact, podium names */
  /* numerals and display (sans 800) */
  --t-num-sm: 28px;      /* stepper values, sidebar points, standings points */
  --t-num-md: 44px;      /* podium points, stepper values (lg), welcome step numbers */
  --t-num-lg: 64px;      /* dock digits (strip), big podium points */
  --t-num-xl: 72px;      /* court scores on phone and dense boards */
  --t-title: clamp(28px, 3.2vw, 40px);
  --t-display: clamp(40px, 5.4vw, 72px);
  --t-stat: clamp(44px, 5.4vw, 80px);
  --t-score: clamp(64px, 7.5vw, 104px);
  --t-team: 20px;
  --t-call: clamp(32px, 5.6vw, 76px);
  --t-timer: clamp(120px, 34vw, 400px);

  /* Tracking. Mono caps use one value (large mono caps one more); body 0; headings tight. */
  --track-caps: 0.1em;
  --track-caps-lg: 0.12em;
  --track-tight: -0.02em;
  --track-display: -0.04em;

  /* R4-07: button ladder (height / label). Circle icon buttons use the same heights. */
  --btn-sm: 48px;  --t-btn-sm: 15px;
  --btn-md: 56px;  --t-btn-md: 17px;
  --btn-lg: 64px;  --t-btn-lg: 19px;
  --btn-xl: 72px;  --t-btn-xl: 22px;

  /* legacy aliases used by older rules */
  --text-kicker: 12px;
  --text-label: 13px;
  --text-mono: 13px;
  --text-body: 16px;
  --text-section: 22px;
  --text-title: 26px;

  /* ---------- Spacing / radius / sizes ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --gap-tile: 12px;
  /* R4-09: one content inset for standard cards, one for heroes (Compact values below). */
  --card-pad: 20px;
  --card-pad-y: 16px;
  --card-pad-hero: 32px;

  --radius-1: 12px;
  --radius-2: 18px;
  --radius-3: 26px;
  --radius-4: 32px;
  --radius-full: 999px;
  /* R4-08: 26/32 are the shipped radii (ui-spec 2.6 updated). Nested rows use --radius-1. */

  /* R4-19: hairlines for cards and dividers; one heavier stroke for outline controls. */
  --stroke-hair: 1px;
  --stroke-control: 1.5px;

  --touch: 48px;
  --touch-lg: 64px;

  /* ---------- Motion ---------- */
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 380ms;
  --dur-enter: 320ms;   /* one-shot entrances and hand-offs */
  --dur-hero: 700ms;
  --dur-pulse: 1s;      /* every red/critical signal pulses at 1 Hz, in phase */
  --dur-pulse-slow: 1.6s; /* calm "live" dots */
  --dur-ambient: 3s;    /* breathing, floating */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---------- Light theme: "Paper Court" (default when no dark preference) ---------- */
  color-scheme: light;
  --bg: #e6e2cf;
  --surface: #f3f0e2;
  --raised: #fcfaf1;
  --sunken: #dad5bd;
  --glass: rgba(255, 253, 245, 0.62);
  --glass-strong: rgba(255, 253, 245, 0.85);
  --glass-solid: rgba(252, 250, 241, 0.92);
  --line: rgba(22, 26, 14, 0.14);
  --line-strong: rgba(22, 26, 14, 0.34);
  --line-top: rgba(255, 255, 255, 0.9);
  --text: #12160d;
  /* R4-16: text2 and text3 were ~5 L* apart in light (read as one grey). text3 stays at the
     sunken-tile AA floor (4.6:1 on --sunken); text2 darkens instead (26 vs 39 L*). */
  --text2: #3a4030;
  --text3: #575e46;
  --accent: #3f5218;
  --accent-strong: #2f3f10;
  --accent-fill: #d7f73a;
  /* R2-08: progress bars / live dots. Lime is 1.1:1 on cream, so light uses olive (8:1). */
  --progress: #3f5218;
  --link: #3f5218; /* R2-18: text links are olive, not lime (lime is kept for the one primary) */
  --on-accent: #10150a;
  --accent-soft: rgba(63, 82, 24, 0.12);
  --accent-line: rgba(63, 82, 24, 0.6);
  --live: #8f3f05;
  --live-soft: rgba(255, 138, 61, 0.2);
  --success: #0b6446;
  --success-soft: rgba(11, 100, 70, 0.14);
  --danger: #a8200f;
  --danger-soft: rgba(168, 32, 15, 0.12);
  --on-success: #fff;
  --control: #12160d;
  --controltext: #f4f1e4;
  --nub: #d7f73a;
  --nub-ink: #10150a;
  --nav-bg: #0d110b;
  --nav-text: #bdc3ae;
  --scrim: rgba(18, 22, 13, 0.5);
  --scrim-drawer: rgba(18, 22, 13, 0.3);
  --shadow-1: 0 1px 2px rgba(30, 34, 15, 0.1);
  --shadow-2: 0 10px 30px rgba(50, 55, 20, 0.14), inset 0 1px 0 var(--line-top);
  --shadow-3: 0 30px 70px rgba(30, 34, 10, 0.28), inset 0 1px 0 var(--line-top);
  --glow-lime: 0 0 0 2px var(--accent-line);
  /* R3-13: lime on cream is ~1.1:1 at its edge, so lime controls get a 1.5px olive ring
     (~8:1) in the light theme; dark keeps its glow. --breathe-rgb tints the ready pulse. */
  --accent-edge: inset 0 0 0 1.5px #3f5218;
  --breathe-rgb: 63, 82, 24;
  --tile-olive: linear-gradient(160deg, #b7c982, #a0b667);
  --tile-olive-ink: #10150a;
  --tile-lime: linear-gradient(150deg, #dcf94f, #b9d62a);
  --sky-1: radial-gradient(60% 55% at 92% 6%, rgba(255, 150, 70, 0.3) 0%, rgba(255, 110, 60, 0.1) 40%, transparent 70%);
  --sky-2: radial-gradient(45% 45% at 4% 98%, rgba(160, 190, 40, 0.16) 0%, transparent 70%);
  --sky-3: radial-gradient(90% 60% at 50% 122%, rgba(91, 112, 37, 0.2) 0%, transparent 70%);
  --grain-blend: multiply;
  --grain-opacity: 0.06;
  --av-1: #c9d8a0; --av-2: #f2c78e; --av-3: #b9d3d6; --av-4: #e3b7a6; --av-5: #d3c7e6; --av-6: #e9df9a;
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- Dark theme: "Golden Hour" (hero) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b0f09;
    --surface: #131810;
    --raised: #1a2015;
    --sunken: #0a0d08;
    --glass: rgba(232, 240, 210, 0.07);
    --glass-strong: rgba(232, 240, 210, 0.12);
    --glass-solid: rgba(19, 24, 16, 0.82);
    --line: rgba(244, 241, 228, 0.14);
    --line-strong: rgba(244, 241, 228, 0.3);
    --line-top: rgba(255, 255, 255, 0.2);
    --text: #f4f1e4;
    --text2: #bdc3ae;
    --text3: #a3aa94;
    --accent: #d7f73a;
    --accent-strong: #e6fb7a;
    --accent-fill: #d7f73a;
    --progress: #d7f73a;
    --link: #c9d8a0;
    --on-accent: #10150a;
    --accent-soft: rgba(215, 247, 58, 0.14);
    --accent-line: rgba(215, 247, 58, 0.55);
    --live: #ffb04a;
    --live-soft: rgba(255, 176, 74, 0.16);
    --success: #5ee3a1;
    --success-soft: rgba(94, 227, 161, 0.16);
    --danger: #ff6b5a;
    --danger-soft: rgba(255, 107, 90, 0.16);
  --on-success: #06281b;
    --control: #f4f1e4;
    --controltext: #10150a;
    --nub: #d7f73a;
    --nub-ink: #10150a;
    --nav-bg: #0a0d08;
    --nav-text: #bdc3ae;
    --scrim: rgba(4, 6, 3, 0.66);
  --scrim-drawer: rgba(4, 6, 3, 0.4);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 10px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 var(--line-top);
    --shadow-3: 0 30px 80px rgba(0, 0, 0, 0.6), inset 0 1px 0 var(--line-top);
    --glow-lime: 0 0 0 1px var(--accent-line), 0 0 28px rgba(215, 247, 58, 0.28);
    --accent-edge: inset 0 0 0 0 transparent;
    --breathe-rgb: 215, 247, 58;
    --tile-olive: linear-gradient(160deg, #4a5f1e, #33440f);
    --tile-olive-ink: #f4f1e4;
    --tile-lime: linear-gradient(150deg, #dcf94f, #a9c81a);
    --sky-1: radial-gradient(60% 55% at 92% 6%, rgba(255, 138, 61, 0.34) 0%, rgba(255, 90, 54, 0.14) 38%, transparent 70%);
    --sky-2: radial-gradient(45% 45% at 4% 98%, rgba(215, 247, 58, 0.1) 0%, transparent 70%);
    --sky-3: radial-gradient(90% 60% at 50% 122%, rgba(91, 112, 37, 0.28) 0%, transparent 70%);
    --grain-blend: overlay;
    --grain-opacity: 0.07;
    --av-1: #a9be73; --av-2: #e8a45a; --av-3: #7fb3b9; --av-4: #d98d75; --av-5: #a999cf; --av-6: #d6c95e;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0f09;
  --surface: #131810;
  --raised: #1a2015;
  --sunken: #0a0d08;
  --glass: rgba(232, 240, 210, 0.07);
  --glass-strong: rgba(232, 240, 210, 0.12);
  --glass-solid: rgba(19, 24, 16, 0.82);
  --line: rgba(244, 241, 228, 0.14);
  --line-strong: rgba(244, 241, 228, 0.3);
  --line-top: rgba(255, 255, 255, 0.2);
  --text: #f4f1e4;
  --text2: #bdc3ae;
  --text3: #a3aa94;
  --accent: #d7f73a;
  --accent-strong: #e6fb7a;
  --accent-fill: #d7f73a;
  --progress: #d7f73a;
  --link: #c9d8a0;
  --on-accent: #10150a;
  --accent-soft: rgba(215, 247, 58, 0.14);
  --accent-line: rgba(215, 247, 58, 0.55);
  --live: #ffb04a;
  --live-soft: rgba(255, 176, 74, 0.16);
  --success: #5ee3a1;
  --success-soft: rgba(94, 227, 161, 0.16);
  --danger: #ff6b5a;
  --danger-soft: rgba(255, 107, 90, 0.16);
  --on-success: #06281b;
  --control: #f4f1e4;
  --controltext: #10150a;
  --nub: #d7f73a;
  --nub-ink: #10150a;
  --nav-bg: #0a0d08;
  --nav-text: #bdc3ae;
  --scrim: rgba(4, 6, 3, 0.66);
  --scrim-drawer: rgba(4, 6, 3, 0.4);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 10px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 var(--line-top);
  --shadow-3: 0 30px 80px rgba(0, 0, 0, 0.6), inset 0 1px 0 var(--line-top);
  --glow-lime: 0 0 0 1px var(--accent-line), 0 0 28px rgba(215, 247, 58, 0.28);
  --accent-edge: inset 0 0 0 0 transparent;
  --breathe-rgb: 215, 247, 58;
  --tile-olive: linear-gradient(160deg, #4a5f1e, #33440f);
  --tile-olive-ink: #f4f1e4;
  --tile-lime: linear-gradient(150deg, #dcf94f, #a9c81a);
  --sky-1: radial-gradient(60% 55% at 92% 6%, rgba(255, 138, 61, 0.34) 0%, rgba(255, 90, 54, 0.14) 38%, transparent 70%);
  --sky-2: radial-gradient(45% 45% at 4% 98%, rgba(215, 247, 58, 0.1) 0%, transparent 70%);
  --sky-3: radial-gradient(90% 60% at 50% 122%, rgba(91, 112, 37, 0.28) 0%, transparent 70%);
  --grain-blend: overlay;
  --grain-opacity: 0.07;
  --av-1: #a9be73; --av-2: #e8a45a; --av-3: #7fb3b9; --av-4: #d98d75; --av-5: #a999cf; --av-6: #d6c95e;
}

/* Contrast / transparency preferences: solid surfaces, stronger borders, no grain. */
@media (prefers-contrast: more) {
  :root { --line: var(--line-strong); --grain-opacity: 0; }
}

/* Size-class tuning (Compact <760 / Medium 760-1023 / Expanded >=1024, mirrors layout.css). */
@media (min-width: 760px) {
  :root { --gap-tile: 14px; --t-team: 22px; }
}
@media (min-width: 1024px) {
  :root { --gap-tile: 16px; --t-team: clamp(28px, 2.4vw, 34px); }
}
@media (max-width: 759px) {
  :root { --card-pad: 16px; --card-pad-hero: 20px; }
}