/* AUTO-GENERATED from tokens/*.json by scripts/build-tokens.mjs — DO NOT EDIT.
 * Run `pnpm tokens:build` to regenerate; the token drift test fails if this
 * file is stale. See tokens/README.md ("CSS output").
 *
 * Semantic tokens as CSS custom properties, named like the Claude Design
 * canvas: the token path in kebab-case (status.onWin -> --status-on-win).
 *
 * Mode: light values in :root. With no data-theme the page follows the
 * system (prefers-color-scheme: dark). data-theme="light" / "dark" forces a
 * mode on the element that carries it and everything inside it; it works on
 * <html> or on any inner element (an inner element must paint its own
 * background: var(--surface-page)). Prefer <html>: then the canvas,
 * scrollbars and overscroll follow too.
 *
 * Accent: data-accent="<family>" (violet by default), on <html> or on the
 * same element as data-theme. surface.* are the plain (pre-blend) neutrals:
 * the app's accent undertone (surfaceFor) is runtime-only. Not emitted:
 * font.* and the React Native shadow fields.
 */
:root {
  --accent-on-accent-violet: #FFFFFF;
  --accent-on-accent-forest: #FFFFFF;
  --accent-on-accent-sunset: #431407;
  --accent-on-accent-ocean: #082F49;
  --accent-on-accent-ember: #FFFFFF;
  --accent-on-accent-gold: #2A1D05;
  --accent-on-soft-violet: #7C3AED;
  --accent-on-soft-forest: #065F46;
  --accent-on-soft-sunset: #9A3412;
  --accent-on-soft-ocean: #075985;
  --accent-on-soft-ember: #9F1239;
  --accent-on-soft-gold: #8A6212;
  --on-fill-text: #FFFFFF;
  --on-fill-text-muted: rgba(255,255,255,0.75);
  --on-fill-text-faint: rgba(255,255,255,0.55);
  --on-fill-wash: rgba(255,255,255,0.18);
  --on-fill-line: rgba(255,255,255,0.32);
  --code-qr-fg: #000000;
  --code-qr-bg: #FFFFFF;
  --surface-page: #FAFAFB;
  --surface-raised: #FFFFFF;
  --surface-sunken: #F1F1F4;
  --surface-line: rgba(20,20,30,0.08);
  --surface-line-strong: rgba(20,20,30,0.14);
  --text-primary: #1A1A22;
  --text-muted: #555560;
  --text-faint: #8B8B95;
  --tier-free-soft: #EDE4FE;
  --tier-free-base: #7C3AED;
  --tier-free-deep: #5B21B6;
  --tier-free-ink: #2E1065;
  --tier-free-on-base: #FFFFFF;
  --tier-premium-soft: #D1FAE5;
  --tier-premium-base: #0E8A5F;
  --tier-premium-deep: #065F46;
  --tier-premium-ink: #022C22;
  --tier-premium-on-base: #FFFFFF;
  --tier-pro-soft: #FBF1D6;
  --tier-pro-base: #C28A2B;
  --tier-pro-deep: #8A6212;
  --tier-pro-ink: #4A340A;
  --tier-pro-on-base: #2A1D05;
  --feedback-danger: #EF4444;
  --feedback-danger-soft: #FEE2E2;
  --feedback-danger-border: #FCA5A5;
  --feedback-danger-ink: #B91C1C;
  --feedback-success: #16A34A;
  --feedback-success-soft: #DCFCE7;
  --feedback-success-border: #86EFAC;
  --feedback-success-ink: #15803D;
  --feedback-warning: #F59E0B;
  --feedback-warning-soft: #FEF3C7;
  --feedback-warning-border: #F59E0B;
  --feedback-warning-ink: #92400E;
  --feedback-on-warning: #451A03;
  --status-win: #16A34A;
  --status-on-win: #FFFFFF;
  --status-live: #4ADE80;
  --status-live-ink: #166534;
  --status-on-live: #04120A;
  --status-online: #16A34A;
  --status-inactive: #9CA3AF;
  --status-unread: #EF4444;
  --score-won-base: #1D9E75;
  --score-won-soft: #E1F5EE;
  --score-won-deep: #0F6E56;
  --score-won-ink: #0F6E56;
  --score-lost-base: #D85A30;
  --score-lost-soft: #FAECE7;
  --score-lost-deep: #993C1D;
  --score-lost-ink: #993C1D;
  --score-unforced-error: #EF4444;
  --score-forced-error: #F97316;
  --score-double-fault: #A855F7;
  --score-panel: rgba(20,10,40,0.025);
  --contrast-bg: #FFFFFF;
  --contrast-fg: #000000;
  --contrast-on-fg: #FFFFFF;
  --contrast-raised: #F2F2F2;
  --contrast-sunken: #F7F7F7;
  --contrast-text-muted: #5C5C5C;
  --contrast-text-faint: #9A9A9A;
  --contrast-line: rgba(0,0,0,0.18);
  --contrast-line-strong: rgba(0,0,0,0.32);
  --social-like: #E11D48;
  --social-like-soft: #FFE4E6;
  --court-line: #1A1326;
  --court-net: #0B1722;
  --team-a-base: #7C3AED;
  --team-a-ink: #7C3AED;
  --team-a-on-base: #FFFFFF;
  --team-b-base: #0369A1;
  --team-b-ink: #0369A1;
  --team-b-on-base: #FFFFFF;
  --team-palette-violet-base: #7C3AED;
  --team-palette-violet-ink: #7C3AED;
  --team-palette-violet-on-base: #FFFFFF;
  --team-palette-ocean-base: #0EA5E9;
  --team-palette-ocean-ink: #075985;
  --team-palette-ocean-on-base: #082F49;
  --team-palette-sunset-base: #F97257;
  --team-palette-sunset-ink: #9A3412;
  --team-palette-sunset-on-base: #431407;
  --team-palette-forest-base: #0E8A5F;
  --team-palette-forest-ink: #065F46;
  --team-palette-forest-on-base: #FFFFFF;
  --team-palette-ember-base: #E11D48;
  --team-palette-ember-ink: #9F1239;
  --team-palette-ember-on-base: #FFFFFF;
  --team-palette-gold-base: #C28A2B;
  --team-palette-gold-ink: #8A6212;
  --team-palette-gold-on-base: #2A1D05;
  --overlay-scrim: rgba(10,8,20,0.42);
  --overlay-veil: rgba(255,255,255,0.6);
  --control-thumb: #FFFFFF;
  --ball-padel: #F8E16C;
  --ball-tennis: #D4ED3C;
  --ball-pickleball: #FACC15;
  --watch-face-bg: #0C0817;
  --watch-serving: #4ADE80;
  --watch-serving-bg: #04120A;
  --watch-serving-soft: rgba(74,222,128,0.16);
  --watch-on-serving: #04120A;
  --watch-locked: #C2410C;
  --watch-locked-bg: #1A0E05;
  --watch-locked-ink: #FDBA74;
  --watch-pending: #F59E0B;
  --watch-received: #FFFFFF;
  --watch-paused: #9CA3AF;
  --watch-paused-bg: #1A0E05;
  --watch-lost: #B91C3C;
  --watch-lost-fill: #2A1116;
  --watch-lost-ink: #FCA5A5;
  --watch-lost-bg: #1A0509;
  --shadow-card: 0 1px 2px rgba(20,10,40,0.05), 0 10px 28px -10px rgba(20,10,40,0.14);
  --shadow-raised: 0 2px 4px rgba(20,10,40,0.05), 0 24px 48px -16px rgba(60,30,140,0.22);
  --radius-control: 14px;
  --radius-card: 22px;
  --radius-panel: 28px;
  --radius-chip: 8px;
  --radius-pill: 9999px;
  --accent-violet-base: #7C3AED;
  --accent-violet-deep: #5B21B6;
  --accent-violet-soft: #EDE4FE;
  --accent-violet-ink: #2E1065;
  --accent-forest-base: #0E8A5F;
  --accent-forest-deep: #065F46;
  --accent-forest-soft: #D1FAE5;
  --accent-forest-ink: #022C22;
  --accent-sunset-base: #F97257;
  --accent-sunset-deep: #9A3412;
  --accent-sunset-soft: #FFE4DC;
  --accent-sunset-ink: #431407;
  --accent-ocean-base: #0EA5E9;
  --accent-ocean-deep: #075985;
  --accent-ocean-soft: #E0F2FE;
  --accent-ocean-ink: #082F49;
  --accent-ember-base: #E11D48;
  --accent-ember-deep: #9F1239;
  --accent-ember-soft: #FFE4E6;
  --accent-ember-ink: #4C0519;
  --accent-gold-base: #C28A2B;
  --accent-gold-deep: #8A6212;
  --accent-gold-soft: #FBF1D6;
  --accent-gold-ink: #4A340A;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent-on-soft-violet: #C4A9F2;
    --accent-on-soft-forest: #5FD3A3;
    --accent-on-soft-sunset: #FDB4A3;
    --accent-on-soft-ocean: #7DD3FC;
    --accent-on-soft-ember: #FDA4AF;
    --accent-on-soft-gold: #E6C779;
    --surface-page: #0B0B12;
    --surface-raised: #1A1A22;
    --surface-sunken: #06060A;
    --surface-line: rgba(255,255,255,0.16);
    --surface-line-strong: rgba(255,255,255,0.26);
    --text-primary: #F1F1F4;
    --text-muted: #C5C5CC;
    --text-faint: #999AA3;
    --feedback-danger-soft: rgba(239,68,68,0.16);
    --feedback-danger-border: rgba(239,68,68,0.40);
    --feedback-danger-ink: #FCA5A5;
    --feedback-success-soft: rgba(22,163,74,0.16);
    --feedback-success-border: rgba(22,163,74,0.40);
    --feedback-success-ink: #86EFAC;
    --feedback-warning-soft: rgba(245,158,11,0.16);
    --feedback-warning-ink: #FCD34D;
    --status-live-ink: #4ADE80;
    --score-won-soft: rgba(29,158,117,0.18);
    --score-won-ink: #5DCAA5;
    --score-lost-soft: rgba(216,90,48,0.18);
    --score-lost-ink: #F0997B;
    --score-panel: rgba(255,255,255,0.04);
    --contrast-bg: #000000;
    --contrast-fg: #FFFFFF;
    --contrast-on-fg: #000000;
    --contrast-raised: #161616;
    --contrast-sunken: #0A0A0A;
    --contrast-text-muted: #A8A8A8;
    --contrast-text-faint: #666666;
    --contrast-line: rgba(255,255,255,0.18);
    --contrast-line-strong: rgba(255,255,255,0.32);
    --social-like: #FB7185;
    --court-line: #F4F1FB;
    --court-net: #FFFFFF;
    --team-a-ink: #C4A9F2;
    --team-b-ink: #7DD3FC;
    --team-palette-violet-ink: #C4A9F2;
    --team-palette-ocean-ink: #7DD3FC;
    --team-palette-sunset-ink: #FDB4A3;
    --team-palette-forest-ink: #5FD3A3;
    --team-palette-ember-ink: #FDA4AF;
    --team-palette-gold-ink: #E6C779;
    --overlay-veil: rgba(11,11,18,0.6);
    --shadow-card: 0 1px 2px rgba(0,0,0,0.30), 0 12px 28px -10px rgba(0,0,0,0.55);
    --shadow-raised: 0 2px 4px rgba(0,0,0,0.35), 0 28px 56px -16px rgba(0,0,0,0.65);
    --accent-violet-soft: rgba(124,58,237,0.22);
    --accent-forest-soft: rgba(14,138,95,0.22);
    --accent-sunset-soft: rgba(249,114,87,0.22);
    --accent-ocean-soft: rgba(14,165,233,0.22);
    --accent-ember-soft: rgba(225,29,72,0.22);
    --accent-gold-soft: rgba(194,138,43,0.22);
  }
}

/* Forced mode, on <html> or on any inner element. */
[data-theme="dark"] {
  --accent-on-soft-violet: #C4A9F2;
  --accent-on-soft-forest: #5FD3A3;
  --accent-on-soft-sunset: #FDB4A3;
  --accent-on-soft-ocean: #7DD3FC;
  --accent-on-soft-ember: #FDA4AF;
  --accent-on-soft-gold: #E6C779;
  --surface-page: #0B0B12;
  --surface-raised: #1A1A22;
  --surface-sunken: #06060A;
  --surface-line: rgba(255,255,255,0.16);
  --surface-line-strong: rgba(255,255,255,0.26);
  --text-primary: #F1F1F4;
  --text-muted: #C5C5CC;
  --text-faint: #999AA3;
  --feedback-danger-soft: rgba(239,68,68,0.16);
  --feedback-danger-border: rgba(239,68,68,0.40);
  --feedback-danger-ink: #FCA5A5;
  --feedback-success-soft: rgba(22,163,74,0.16);
  --feedback-success-border: rgba(22,163,74,0.40);
  --feedback-success-ink: #86EFAC;
  --feedback-warning-soft: rgba(245,158,11,0.16);
  --feedback-warning-ink: #FCD34D;
  --status-live-ink: #4ADE80;
  --score-won-soft: rgba(29,158,117,0.18);
  --score-won-ink: #5DCAA5;
  --score-lost-soft: rgba(216,90,48,0.18);
  --score-lost-ink: #F0997B;
  --score-panel: rgba(255,255,255,0.04);
  --contrast-bg: #000000;
  --contrast-fg: #FFFFFF;
  --contrast-on-fg: #000000;
  --contrast-raised: #161616;
  --contrast-sunken: #0A0A0A;
  --contrast-text-muted: #A8A8A8;
  --contrast-text-faint: #666666;
  --contrast-line: rgba(255,255,255,0.18);
  --contrast-line-strong: rgba(255,255,255,0.32);
  --social-like: #FB7185;
  --court-line: #F4F1FB;
  --court-net: #FFFFFF;
  --team-a-ink: #C4A9F2;
  --team-b-ink: #7DD3FC;
  --team-palette-violet-ink: #C4A9F2;
  --team-palette-ocean-ink: #7DD3FC;
  --team-palette-sunset-ink: #FDB4A3;
  --team-palette-forest-ink: #5FD3A3;
  --team-palette-ember-ink: #FDA4AF;
  --team-palette-gold-ink: #E6C779;
  --overlay-veil: rgba(11,11,18,0.6);
  --shadow-card: 0 1px 2px rgba(0,0,0,0.30), 0 12px 28px -10px rgba(0,0,0,0.55);
  --shadow-raised: 0 2px 4px rgba(0,0,0,0.35), 0 28px 56px -16px rgba(0,0,0,0.65);
  --accent-violet-soft: rgba(124,58,237,0.22);
  --accent-forest-soft: rgba(14,138,95,0.22);
  --accent-sunset-soft: rgba(249,114,87,0.22);
  --accent-ocean-soft: rgba(14,165,233,0.22);
  --accent-ember-soft: rgba(225,29,72,0.22);
  --accent-gold-soft: rgba(194,138,43,0.22);
}

[data-theme="light"] {
  --accent-on-soft-violet: #7C3AED;
  --accent-on-soft-forest: #065F46;
  --accent-on-soft-sunset: #9A3412;
  --accent-on-soft-ocean: #075985;
  --accent-on-soft-ember: #9F1239;
  --accent-on-soft-gold: #8A6212;
  --surface-page: #FAFAFB;
  --surface-raised: #FFFFFF;
  --surface-sunken: #F1F1F4;
  --surface-line: rgba(20,20,30,0.08);
  --surface-line-strong: rgba(20,20,30,0.14);
  --text-primary: #1A1A22;
  --text-muted: #555560;
  --text-faint: #8B8B95;
  --feedback-danger-soft: #FEE2E2;
  --feedback-danger-border: #FCA5A5;
  --feedback-danger-ink: #B91C1C;
  --feedback-success-soft: #DCFCE7;
  --feedback-success-border: #86EFAC;
  --feedback-success-ink: #15803D;
  --feedback-warning-soft: #FEF3C7;
  --feedback-warning-ink: #92400E;
  --status-live-ink: #166534;
  --score-won-soft: #E1F5EE;
  --score-won-ink: #0F6E56;
  --score-lost-soft: #FAECE7;
  --score-lost-ink: #993C1D;
  --score-panel: rgba(20,10,40,0.025);
  --contrast-bg: #FFFFFF;
  --contrast-fg: #000000;
  --contrast-on-fg: #FFFFFF;
  --contrast-raised: #F2F2F2;
  --contrast-sunken: #F7F7F7;
  --contrast-text-muted: #5C5C5C;
  --contrast-text-faint: #9A9A9A;
  --contrast-line: rgba(0,0,0,0.18);
  --contrast-line-strong: rgba(0,0,0,0.32);
  --social-like: #E11D48;
  --court-line: #1A1326;
  --court-net: #0B1722;
  --team-a-ink: #7C3AED;
  --team-b-ink: #0369A1;
  --team-palette-violet-ink: #7C3AED;
  --team-palette-ocean-ink: #075985;
  --team-palette-sunset-ink: #9A3412;
  --team-palette-forest-ink: #065F46;
  --team-palette-ember-ink: #9F1239;
  --team-palette-gold-ink: #8A6212;
  --overlay-veil: rgba(255,255,255,0.6);
  --shadow-card: 0 1px 2px rgba(20,10,40,0.05), 0 10px 28px -10px rgba(20,10,40,0.14);
  --shadow-raised: 0 2px 4px rgba(20,10,40,0.05), 0 24px 48px -16px rgba(60,30,140,0.22);
  --accent-violet-soft: #EDE4FE;
  --accent-forest-soft: #D1FAE5;
  --accent-sunset-soft: #FFE4DC;
  --accent-ocean-soft: #E0F2FE;
  --accent-ember-soft: #FFE4E6;
  --accent-gold-soft: #FBF1D6;
}

/* Active accent family (data-accent; violet by default). Re-declared on
 * every [data-theme] element so its mode-aware values follow that mode:
 * the default, then the family of an ancestor's data-accent, then (later,
 * so it wins the specificity tie) the element's own data-accent. */
:root,
[data-theme] {
  --accent: var(--accent-violet-base);
  --accent-deep: var(--accent-violet-deep);
  --accent-soft: var(--accent-violet-soft);
  --accent-ink: var(--accent-violet-ink);
  --accent-on-soft: var(--accent-on-soft-violet);
  --accent-on-accent: var(--accent-on-accent-violet);
}
[data-accent="violet"] [data-theme] {
  --accent: var(--accent-violet-base);
  --accent-deep: var(--accent-violet-deep);
  --accent-soft: var(--accent-violet-soft);
  --accent-ink: var(--accent-violet-ink);
  --accent-on-soft: var(--accent-on-soft-violet);
  --accent-on-accent: var(--accent-on-accent-violet);
}
[data-accent="forest"] [data-theme] {
  --accent: var(--accent-forest-base);
  --accent-deep: var(--accent-forest-deep);
  --accent-soft: var(--accent-forest-soft);
  --accent-ink: var(--accent-forest-ink);
  --accent-on-soft: var(--accent-on-soft-forest);
  --accent-on-accent: var(--accent-on-accent-forest);
}
[data-accent="sunset"] [data-theme] {
  --accent: var(--accent-sunset-base);
  --accent-deep: var(--accent-sunset-deep);
  --accent-soft: var(--accent-sunset-soft);
  --accent-ink: var(--accent-sunset-ink);
  --accent-on-soft: var(--accent-on-soft-sunset);
  --accent-on-accent: var(--accent-on-accent-sunset);
}
[data-accent="ocean"] [data-theme] {
  --accent: var(--accent-ocean-base);
  --accent-deep: var(--accent-ocean-deep);
  --accent-soft: var(--accent-ocean-soft);
  --accent-ink: var(--accent-ocean-ink);
  --accent-on-soft: var(--accent-on-soft-ocean);
  --accent-on-accent: var(--accent-on-accent-ocean);
}
[data-accent="ember"] [data-theme] {
  --accent: var(--accent-ember-base);
  --accent-deep: var(--accent-ember-deep);
  --accent-soft: var(--accent-ember-soft);
  --accent-ink: var(--accent-ember-ink);
  --accent-on-soft: var(--accent-on-soft-ember);
  --accent-on-accent: var(--accent-on-accent-ember);
}
[data-accent="gold"] [data-theme] {
  --accent: var(--accent-gold-base);
  --accent-deep: var(--accent-gold-deep);
  --accent-soft: var(--accent-gold-soft);
  --accent-ink: var(--accent-gold-ink);
  --accent-on-soft: var(--accent-on-soft-gold);
  --accent-on-accent: var(--accent-on-accent-gold);
}
[data-accent="violet"],
[data-accent="violet"][data-theme] {
  --accent: var(--accent-violet-base);
  --accent-deep: var(--accent-violet-deep);
  --accent-soft: var(--accent-violet-soft);
  --accent-ink: var(--accent-violet-ink);
  --accent-on-soft: var(--accent-on-soft-violet);
  --accent-on-accent: var(--accent-on-accent-violet);
}
[data-accent="forest"],
[data-accent="forest"][data-theme] {
  --accent: var(--accent-forest-base);
  --accent-deep: var(--accent-forest-deep);
  --accent-soft: var(--accent-forest-soft);
  --accent-ink: var(--accent-forest-ink);
  --accent-on-soft: var(--accent-on-soft-forest);
  --accent-on-accent: var(--accent-on-accent-forest);
}
[data-accent="sunset"],
[data-accent="sunset"][data-theme] {
  --accent: var(--accent-sunset-base);
  --accent-deep: var(--accent-sunset-deep);
  --accent-soft: var(--accent-sunset-soft);
  --accent-ink: var(--accent-sunset-ink);
  --accent-on-soft: var(--accent-on-soft-sunset);
  --accent-on-accent: var(--accent-on-accent-sunset);
}
[data-accent="ocean"],
[data-accent="ocean"][data-theme] {
  --accent: var(--accent-ocean-base);
  --accent-deep: var(--accent-ocean-deep);
  --accent-soft: var(--accent-ocean-soft);
  --accent-ink: var(--accent-ocean-ink);
  --accent-on-soft: var(--accent-on-soft-ocean);
  --accent-on-accent: var(--accent-on-accent-ocean);
}
[data-accent="ember"],
[data-accent="ember"][data-theme] {
  --accent: var(--accent-ember-base);
  --accent-deep: var(--accent-ember-deep);
  --accent-soft: var(--accent-ember-soft);
  --accent-ink: var(--accent-ember-ink);
  --accent-on-soft: var(--accent-on-soft-ember);
  --accent-on-accent: var(--accent-on-accent-ember);
}
[data-accent="gold"],
[data-accent="gold"][data-theme] {
  --accent: var(--accent-gold-base);
  --accent-deep: var(--accent-gold-deep);
  --accent-soft: var(--accent-gold-soft);
  --accent-ink: var(--accent-gold-ink);
  --accent-on-soft: var(--accent-on-soft-gold);
  --accent-on-accent: var(--accent-on-accent-gold);
}

/* Older canvas names, kept as aliases (SMF-DS6). */
:root,
[data-theme],
[data-accent] {
  --r-sm: var(--radius-chip);
  --r-md: var(--radius-control);
  --r-lg: var(--radius-card);
  --r-xl: var(--radius-panel);
  --r-pill: var(--radius-pill);
  --on-accent: var(--accent-on-accent);
  --status-warning: var(--feedback-warning);
  --bg: var(--surface-page);
  --bg-elevated: var(--surface-raised);
  --bg-sunken: var(--surface-sunken);
  --line: var(--surface-line);
  --line-strong: var(--surface-line-strong);
  --text: var(--text-primary);
  --text-mute: var(--text-muted);
  --violet-base: var(--accent-violet-base);
  --violet-deep: var(--accent-violet-deep);
  --violet-soft: var(--accent-violet-soft);
  --violet-ink: var(--accent-violet-ink);
  --forest-base: var(--accent-forest-base);
  --forest-deep: var(--accent-forest-deep);
  --forest-soft: var(--accent-forest-soft);
  --forest-ink: var(--accent-forest-ink);
  --sunset-base: var(--accent-sunset-base);
  --sunset-deep: var(--accent-sunset-deep);
  --sunset-soft: var(--accent-sunset-soft);
  --sunset-ink: var(--accent-sunset-ink);
  --ocean-base: var(--accent-ocean-base);
  --ocean-deep: var(--accent-ocean-deep);
  --ocean-soft: var(--accent-ocean-soft);
  --ocean-ink: var(--accent-ocean-ink);
  --ember-base: var(--accent-ember-base);
  --ember-deep: var(--accent-ember-deep);
  --ember-soft: var(--accent-ember-soft);
  --ember-ink: var(--accent-ember-ink);
  --gold-base: var(--accent-gold-base);
  --gold-deep: var(--accent-gold-deep);
  --gold-soft: var(--accent-gold-soft);
  --gold-ink: var(--accent-gold-ink);
}