/* Generated from DESIGN.md. Edit its canonical token block, then run tools/sync_tokens.py. */
:root {
  --white:#ffffff;
  /* neutral: olive-tinted, never cool gray. */
  --neutral-50:#F4F5F2;
  --neutral-100:#EBECE5;
  --neutral-200:#E1E2DA;
  --neutral-300:#D5D7D1;
  --neutral-400:#8A8D86;
  --neutral-500:#62655F;
  --neutral-600:#4A4D47;
  --neutral-700:#2A2C27;
  --neutral-800:#1A1C17;
  --neutral-900:#111311;
  --neutral-950:#0A0B0D;
  /* brand-primary: citron, the single accent. */
  --brand-primary-50:#F6FBDD;
  --brand-primary-100:#EEF7C4;
  --brand-primary-200:#E4F58A;
  --brand-primary-300:#E2F773;
  --brand-primary-400:#D8F24B;
  --brand-primary-500:#C9E33A;
  --brand-primary-600:#A3BA1A;
  --brand-primary-700:#7C9400;
  --brand-primary-800:#5C6E00;
  --brand-primary-900:#3B4700;
  --brand-primary-950:#232A00;
  /* Status colors: green means won, red means lost. Independent of citron. */
  --status-success-light:#1B7038; --status-success-light-bg:#DDEBDD;
  --status-success-dark:#3FBF6A; --status-success-dark-bg:#152A1B;
  --status-danger-light:#A63E26; --status-danger-light-bg:#F4E2DC;
  --status-danger-dark:#F07A5E; --status-danger-dark-bg:#2C1A15;
  --status-warning-light:#795512; --status-warning-light-bg:#FFF4D6;
  --status-warning-dark:#EFD38E; --status-warning-dark-bg:#44371C;
  --status-info-light:#2D4F8A; --status-info-light-bg:#E8EEF8;
  --status-info-dark:#B3CEFF; --status-info-dark-bg:#1E2A3D;
  /* Semantic roles: use these in components and product styles. */
  --bg:var(--neutral-100); --bg-subtle:var(--neutral-50); --bg-muted:var(--neutral-200); --bg-inverse:var(--neutral-900);
  --fg:var(--neutral-900); --fg-secondary:var(--neutral-600); --fg-muted:#585B55; --fg-subtle:var(--neutral-500);
  --fg-placeholder:var(--neutral-500); --fg-disabled:var(--neutral-400); --fg-inverse:var(--white);
  --border:#DADBD4; --border-strong:var(--neutral-300);
  --brand-primary:var(--brand-primary-400);
  --brand-primary-hover:var(--brand-primary-300);
  --brand-primary-pressed:var(--brand-primary-500);
  --brand-primary-on:var(--neutral-950);
  --brand-primary-subtle:var(--brand-primary-100);
  --brand-primary-muted:var(--brand-primary-200);
  --brand-primary-text:var(--brand-primary-900);
  --brand-primary-border:var(--brand-primary-800);
  --fg-brand-primary:var(--brand-primary-text);
  /* The primary action is ink in light mode and citron in dark mode. */
  --accent:var(--neutral-900); --accent-hover:var(--neutral-700); --accent-pressed:var(--neutral-950);
  --accent-fg:var(--white); --accent-subtle:var(--brand-primary-subtle);
  --danger:var(--status-danger-light); --danger-bg:var(--status-danger-light-bg);
  --success:var(--status-success-light); --success-bg:var(--status-success-light-bg);
  --warning:var(--status-warning-light); --warning-bg:var(--status-warning-light-bg);
  --info:var(--status-info-light); --info-bg:var(--status-info-light-bg);
  --win:var(--success); --loss:var(--danger);
  --focus:var(--neutral-900); --scrim:#00000099;
  /* On-photo materials: the same in both themes, because they sit on photos, team colors and the always-dark game sheet. */
  --on-photo:var(--white); --on-photo-secondary:#ffffffbf; --on-photo-faint:#ffffff8c;
  --glass:#ffffff14; --glass-strong:#ffffff26; --glass-edge:#ffffff26; --glass-edge-strong:#ffffff4d; --glass-track:#ffffff42; --glass-dot:#ffffff66;
  --photo-scrim:#00000052; --photo-scrim-soft:#0000002e;
  --photo-veil:#0A0B0Ded; --glass-black:linear-gradient(180deg,#ffffff12 0%,#ffffff05 100%),#0A0B0D99;
  --photo-shade:linear-gradient(180deg,#0a0b0d8c 0%,#0a0b0d33 30%,#0a0b0dcc 80%,#0a0b0df2 100%); --photo-top:#0a0b0d73;
  /* Materials: translucent, lit-from-above surfaces. Not text roles. */
  --surface-sheet:var(--white); --surface-hero:var(--neutral-900); --on-hero:var(--white); --on-hero-muted:#ffffffa3; --nav-ring:var(--neutral-50);
  --app-bg:radial-gradient(90% 40% at 100% 62%,#ffffff8c,transparent 70%),radial-gradient(80% 36% at 0% 88%,#282e100d,transparent 70%),linear-gradient(180deg,#F2F3EC 0%,#EBECE5 55%,#E5E6DF 100%);
  --card:linear-gradient(128deg,#ffffff8c 0%,#ffffff00 38%),linear-gradient(180deg,#ffffffcc 0%,#ffffff61 100%); --card-border:#282e101f;
  --card-shadow:inset 0 1.5px 0 #ffffff,inset 0 -1px 0 #282e100d;
  --inset:#282e100a; --line:#282e1014; --line-strong:var(--neutral-300); --tab-on:#1113111f;
  --you-bg:#F1F8CF; --win-bg:#2f8f4e1f; --loss-bg:#c4553a1f;
  --hit:var(--brand-primary-800); --hit-glow:#7c940029; --miss-glow:#c4553a1f; --gauge:var(--brand-primary-700);
  --nav-glass:linear-gradient(180deg,#ffffffeb 0%,#ffffffa3 100%); --nav-edge:#ffffffd9;
  --nav-shadow:0 16px 34px -14px #282e1059,inset 0 1px 0 #ffffff,inset 0 -1px 0 #282e100f;
  --bar:#f4f5f2d1; --hair:#1113110f; --carousel-bg:#f4f5f2cc;
  --flood:#d8f24b42; --flood-2:#d8f24b29; --flood-3:#ffffffe6; --beam:#d8f24b1a; --grain:.07;
  --selection:var(--brand-primary-200); --caret:var(--brand-primary-800);
  --citron:var(--brand-primary-400); --on-citron:var(--neutral-950);
  /* Typography: Figtree only, tabular numerals everywhere. */
  --font-body:'Figtree',system-ui,sans-serif; --font-display:var(--font-body); --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --text-3xs:.625rem; --text-2xs:.6875rem; --text-xs:.75rem; --text-sm:.8125rem;
  --text-body-sm:.875rem; --text-body:.9375rem; --text-md:1rem; --text-body-lg:1.0625rem;
  --text-lg:1.125rem; --text-xl:1.25rem; --text-2xl:1.375rem; --text-3xl:1.5rem;
  --text-4xl:1.75rem; --text-5xl:1.875rem; --text-6xl:2.125rem; --text-7xl:2.375rem;
  --text-8xl:2.875rem; --text-9xl:3.375rem; --text-10xl:4rem; --text-11xl:6rem;
  --text-12xl:7.75rem; --text-13xl:9.375rem;
  --line-height-none:.9; --line-height-tight:1.1; --line-height-snug:1.25;
  --line-height-normal:1.5; --line-height-relaxed:1.75;
  --line-height:var(--line-height-normal);
  --letter-spacing-tightest:-.05em; --letter-spacing-tighter:-.035em; --letter-spacing-tight:-.02em;
  --letter-spacing-snug:-.01em; --letter-spacing:0; --letter-spacing-wide:.02em;
  --letter-spacing-wider:.08em; --letter-spacing-widest:.12em;
  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; --weight-extrabold:800;
  --space-0-5:.125rem; --space-1:.25rem; --space-1-5:.375rem; --space-2:.5rem; --space-2-5:.625rem;
  --space-3:.75rem; --space-3-5:.875rem; --space-4:1rem; --space-5:1.25rem; --space-6:1.5rem; --space-7:1.75rem;
  --space-8:2rem; --space-10:2.5rem; --space-12:3rem; --space-16:4rem; --space-20:5rem; --space-28:7rem;
  --radius-2xs:.25rem; --radius-xs:.5rem; --radius-sm:.75rem; --radius-md:.875rem; --radius-lg:1.125rem;
  --radius-xl:1.25rem; --radius-2xl:1.625rem; --radius-3xl:2rem; --radius-full:999px;
  --border-width:1px; --focus-width:2px; --focus-offset:3px;
  --shadow-sm:0 2px 8px #11131114; --shadow-lg:0 22px 44px -14px #11131133;
  --control-xs:2rem; --control-sm:2.25rem; --control-md:2.75rem; --control-lg:3.25rem; --control-xl:3.75rem; --touch-target:2.75rem;
  --content-sm:28rem; --content-md:48rem; --content-lg:76rem;
  --motion-fast:160ms; --motion-normal:220ms; --motion-slow:420ms;
  --ease:cubic-bezier(.2,.8,.2,1); --ease-out-expo:cubic-bezier(.16,1,.3,1); --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1); --motion-press:120ms; --motion-screen:340ms;
  --layer-sticky:10; --layer-overlay:30; --nav-height:4rem;
  color-scheme:light;
}
:root[data-theme="dark"] {
  --bg:#0C0D0A; --bg-subtle:#11130E; --bg-muted:#1A1C17; --bg-inverse:var(--neutral-50);
  --fg:#F3F4EF; --fg-secondary:#C3C4BE; --fg-muted:#A3A49F; --fg-subtle:#8E8F8A;
  --fg-placeholder:#8E8F8A; --fg-disabled:#5C5E58; --fg-inverse:var(--neutral-950);
  --border:#22241F; --border-strong:#3E403A;
  --brand-primary:var(--brand-primary-400);
  --brand-primary-hover:var(--brand-primary-300);
  --brand-primary-pressed:var(--brand-primary-500);
  --brand-primary-on:var(--neutral-950);
  --brand-primary-subtle:#23280F;
  --brand-primary-muted:#2E3417;
  --brand-primary-text:var(--brand-primary-200);
  --brand-primary-border:var(--brand-primary-400);
  --accent:var(--brand-primary-400); --accent-hover:var(--brand-primary-300); --accent-pressed:var(--brand-primary-500);
  --accent-fg:var(--neutral-950); --accent-subtle:var(--brand-primary-subtle);
  --danger:var(--status-danger-dark); --danger-bg:var(--status-danger-dark-bg);
  --success:var(--status-success-dark); --success-bg:var(--status-success-dark-bg);
  --warning:var(--status-warning-dark); --warning-bg:var(--status-warning-dark-bg);
  --info:var(--status-info-dark); --info-bg:var(--status-info-dark-bg);
  --focus:var(--brand-primary-400); --scrim:#000000a3;
  --surface-sheet:#151712; --surface-hero:#1A1C17; --nav-ring:#1A1C17;
  --app-bg:linear-gradient(180deg,#11130E 0%,#0C0D0A 55%,#0A0B09 100%);
  --card:linear-gradient(180deg,#ffffff12 0%,#ffffff09 100%); --card-border:#ffffff13;
  --card-shadow:inset 0 1px 0 #ffffff0e,0 14px 30px -20px #000000d9;
  --inset:#ffffff0d; --line:#ffffff14; --line-strong:#ffffff2e; --tab-on:linear-gradient(180deg,#ffffff26 0%,#ffffff0f 100%);
  --you-bg:#d8f24b24; --win-bg:#3fbf6a29; --loss-bg:#f07a5e29;
  --hit:var(--brand-primary-400); --hit-glow:#d8f24b26; --miss-glow:#f07a5e21; --gauge:var(--brand-primary-400);
  --nav-glass:linear-gradient(180deg,#ffffff12 0%,#ffffff04 100%),#181a15bd; --nav-edge:#ffffff17;
  --nav-shadow:0 20px 40px -14px #000000cc,inset 0 1px 0 #ffffff1f,inset 0 -1px 0 #00000066;
  --bar:#0d0e0bc7; --hair:#ffffff12; --carousel-bg:#0d0e0bbd;
  --flood:#e4f5962b; --flood-2:#e4f5961c; --flood-3:#d8f24b12; --beam:#ecf8be16; --grain:.09;
  --selection:var(--brand-primary-400); --caret:var(--brand-primary-400);
  --shadow-sm:0 2px 8px #0000004d; --shadow-lg:0 22px 44px -14px #00000099;
  color-scheme:dark;
}
@media (prefers-color-scheme:dark) {
  :root:not([data-theme]) {
    --bg:#0C0D0A; --bg-subtle:#11130E; --bg-muted:#1A1C17; --bg-inverse:var(--neutral-50);
    --fg:#F3F4EF; --fg-secondary:#C3C4BE; --fg-muted:#A3A49F; --fg-subtle:#8E8F8A;
    --fg-placeholder:#8E8F8A; --fg-disabled:#5C5E58; --fg-inverse:var(--neutral-950);
    --border:#22241F; --border-strong:#3E403A;
    --brand-primary:var(--brand-primary-400);
    --brand-primary-hover:var(--brand-primary-300);
    --brand-primary-pressed:var(--brand-primary-500);
    --brand-primary-on:var(--neutral-950);
    --brand-primary-subtle:#23280F;
    --brand-primary-muted:#2E3417;
    --brand-primary-text:var(--brand-primary-200);
    --brand-primary-border:var(--brand-primary-400);
    --accent:var(--brand-primary-400); --accent-hover:var(--brand-primary-300); --accent-pressed:var(--brand-primary-500);
    --accent-fg:var(--neutral-950); --accent-subtle:var(--brand-primary-subtle);
    --danger:var(--status-danger-dark); --danger-bg:var(--status-danger-dark-bg);
    --success:var(--status-success-dark); --success-bg:var(--status-success-dark-bg);
    --warning:var(--status-warning-dark); --warning-bg:var(--status-warning-dark-bg);
    --info:var(--status-info-dark); --info-bg:var(--status-info-dark-bg);
    --focus:var(--brand-primary-400); --scrim:#000000a3;
    --surface-sheet:#151712; --surface-hero:#1A1C17; --nav-ring:#1A1C17;
    --app-bg:linear-gradient(180deg,#11130E 0%,#0C0D0A 55%,#0A0B09 100%);
    --card:linear-gradient(180deg,#ffffff12 0%,#ffffff09 100%); --card-border:#ffffff13;
    --card-shadow:inset 0 1px 0 #ffffff0e,0 14px 30px -20px #000000d9;
    --inset:#ffffff0d; --line:#ffffff14; --line-strong:#ffffff2e; --tab-on:linear-gradient(180deg,#ffffff26 0%,#ffffff0f 100%);
    --you-bg:#d8f24b24; --win-bg:#3fbf6a29; --loss-bg:#f07a5e29;
    --hit:var(--brand-primary-400); --hit-glow:#d8f24b26; --miss-glow:#f07a5e21; --gauge:var(--brand-primary-400);
    --nav-glass:linear-gradient(180deg,#ffffff12 0%,#ffffff04 100%),#181a15bd; --nav-edge:#ffffff17;
    --nav-shadow:0 20px 40px -14px #000000cc,inset 0 1px 0 #ffffff1f,inset 0 -1px 0 #00000066;
    --bar:#0d0e0bc7; --hair:#ffffff12; --carousel-bg:#0d0e0bbd;
    --flood:#e4f5962b; --flood-2:#e4f5961c; --flood-3:#d8f24b12; --beam:#ecf8be16; --grain:.09;
    --selection:var(--brand-primary-400); --caret:var(--brand-primary-400);
    --shadow-sm:0 2px 8px #0000004d; --shadow-lg:0 22px 44px -14px #00000099;
    color-scheme:dark;
  }
}