/* Design tokens, transcribed from the Flutter app (lib/ui/tokens, lib/ui/theme). Dark is the reference theme. */
@layer tokens, base, components, shell, screens;
@layer tokens {
  :root {
    color-scheme: dark;

    --orange-100: #ffeee0;
    --orange-200: #ffd3b0;
    --orange-300: #ff9a53;
    --orange-400: #ff7a1f;
    --orange-500: #fd6101;
    --orange-600: #d64f00;
    --orange-700: #a83e00;
    --orange-800: #7a2c00;
    --orange-900: #3f1600;
    --bleu-100: #def6ff;
    --bleu-200: #b8ecff;
    --bleu-300: #66d4fa;
    --bleu-400: #25c2f7;
    --bleu-500: #01b3f3;
    --bleu-600: #0090c6;
    --bleu-700: #006d96;
    --bleu-800: #004c6b;
    --bleu-900: #052f42;
    --vert-200: #d6ecbc;
    --vert-300: #b6de8c;
    --vert-400: #9fd067;
    --vert-500: #87be4c;
    --vert-600: #6c9c36;
    --vert-700: #527828;
    --vert-900: #22330f;
    --error-200: #ffd7d2;
    --error-300: #ffb4ac;
    --error-400: #ff8878;
    --error-500: #e02b1d;
    --error-600: #b81e14;
    --error-700: #8e1410;
    --error-900: #3a0a07;
    --ink-1000: #04060f;
    --ink-950: #070c16;
    --ink-900: #0b1220;
    --ink-850: #101a2e;
    --ink-800: #16213a;
    --ink-750: #1c2942;
    --ink-700: #24324e;
    --ink-600: #2f3e5c;
    --ink-500: #3e4f70;
    --ink-400: #52648f;
    --ink-350: #7387a8;
    --ink-300: #7c8fb4;
    --ink-200: #adbbd6;
    --ink-100: #d1daec;
    --ink-50: #eaeff9;
    --ink-0: #ffffff;
    --ink-snow: #f1faff;

    --surface-app: var(--ink-900);
    --surface-lowest: var(--ink-950);
    --surface-low: var(--ink-850);
    --surface: var(--ink-800);
    --surface-high: var(--ink-750);
    --surface-highest: var(--ink-700);
    --surface-glass: rgba(16, 33, 58, 0.68);
    --surface-glass-high: rgba(28, 41, 66, 0.76);
    --surface-glass-bar: rgba(11, 18, 32, 0.84);
    --surface-scrim: rgba(4, 6, 15, 0.74);
    --primary-container: rgba(253, 97, 1, 0.16);
    --primary-container-hover: rgba(253, 97, 1, 0.28);
    --on-primary-container: var(--orange-300);
    --data-container: rgba(1, 179, 243, 0.14);
    --data-container-hover: rgba(1, 179, 243, 0.26);
    --on-data-container: var(--bleu-300);
    --go-container: rgba(135, 190, 76, 0.16);
    --on-go-container: var(--vert-300);
    --error-container: rgba(224, 43, 29, 0.14);
    --on-error-container: var(--error-300);
    --live-container: rgba(253, 97, 1, 0.34);
    --on-live-container: var(--orange-200);
    --surface-field: rgba(4, 6, 15, 0.34);
    --surface-field-hover: rgba(4, 6, 15, 0.22);
    --state-hover: rgba(255, 255, 255, 0.08);
    --state-press: rgba(255, 255, 255, 0.12);
    --state-selected: rgba(253, 97, 1, 0.16);
    --state-hover-on-accent: rgba(255, 255, 255, 0.1);
    --state-press-on-accent: rgba(4, 6, 15, 0.14);
    --text-primary: var(--ink-0);
    --text-body: var(--ink-100);
    --text-muted: var(--ink-300);
    --text-faint: var(--ink-350);
    --icon-faint: var(--ink-400);
    --text-accent: var(--orange-500);
    --text-accent-bright: var(--orange-400);
    --text-on-accent: var(--ink-0);
    --text-data: var(--bleu-400);
    --text-on-data: var(--ink-1000);
    --text-go: var(--vert-400);
    --text-danger: var(--error-400);
    --text-on-danger: var(--ink-0);
    --text-on-media: var(--ink-0);
    --text-on-media-muted: var(--ink-200);
    --link: var(--orange-500);
    --link-hover: var(--orange-400);
    --link-press: var(--orange-600);
    --accent: var(--orange-500);
    --accent-hover: #fd6405;
    --accent-press: var(--orange-600);
    --accent-quiet: rgba(253, 97, 1, 0.16);
    --accent-bright: var(--orange-400);
    --data: var(--bleu-500);
    --data-hover: #05b5f3;
    --data-press: var(--bleu-600);
    --data-quiet: rgba(1, 179, 243, 0.14);
    --data-bright: var(--bleu-400);
    --status-go: var(--vert-500);
    --status-go-quiet: rgba(135, 190, 76, 0.16);
    --status-danger: var(--error-500);
    --status-danger-quiet: rgba(224, 43, 29, 0.14);
    --status-danger-press: var(--error-600);
    --status-idle: var(--ink-500);
    --border-hairline: rgba(255, 255, 255, 0.1);
    --border-subtle: rgba(255, 255, 255, 0.14);
    --border-strong: rgba(255, 255, 255, 0.22);
    --border-accent: rgba(253, 97, 1, 0.46);
    --border-focus: var(--orange-500);
    --border-on-accent: var(--orange-300);
    --border-data: rgba(1, 179, 243, 0.44);
    --border-on-data: var(--bleu-300);
    --border-error: rgba(224, 43, 29, 0.55);
    --divider: rgba(255, 255, 255, 0.08);
    --divider-strong: rgba(255, 255, 255, 0.14);
    --grid-line: rgba(1, 179, 243, 0.14);
    --sheen-lit: rgba(255, 255, 255, 0.22);
    --sheen-quiet: rgba(255, 255, 255, 0.08);

    --elevation-1: 0 2px 6px rgba(0, 0, 0, 0.35);
    --elevation-2: 0 2px 6px rgba(0, 0, 0, 0.35);
    --elevation-3: 0 10px 24px rgba(0, 0, 0, 0.45);
    --elevation-4: 0 24px 60px rgba(0, 0, 0, 0.55);
    --elevation-5: 0 24px 60px rgba(0, 0, 0, 0.55);
    --glow-accent: 0 0 24px rgba(253, 97, 1, 0.5);
    --glow-accent-soft: 0 0 28px rgba(253, 97, 1, 0.32);
    --glow-data: 0 0 24px rgba(1, 179, 243, 0.45);
    --glow-data-soft: 0 0 28px rgba(1, 179, 243, 0.28);
    --glow-danger: 0 0 20px rgba(224, 43, 29, 0.35);
    --bloom-accent: 0 6px 20px -8px rgba(253, 97, 1, 0.75);
    --bloom-data: 0 6px 20px -8px rgba(1, 179, 243, 0.6);
    --bloom-danger: 0 6px 20px -8px rgba(224, 43, 29, 0.75);

    --grad-accent: linear-gradient(115deg, #ff7a1f, #d64f00);
    --grad-accent-soft: linear-gradient(115deg, rgba(253, 97, 1, 0.24), rgba(214, 79, 0, 0.1));
    --grad-accent-bright: linear-gradient(115deg, #ffd3b0, #ff7a1f);
    --grad-data: linear-gradient(115deg, #25c2f7, #0090c6);
    --grad-data-soft: linear-gradient(115deg, rgba(1, 179, 243, 0.22), rgba(0, 144, 198, 0.1));
    --grad-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
    --grad-track-glow: radial-gradient(120% 120% at 50% 0%, rgba(253, 97, 1, 0.2) 0%, rgba(4, 6, 15, 0) 70%);
    --speed-streak: linear-gradient(90deg, rgba(253, 97, 1, 0) 0%, #fd6101 60%, #ffd3b0 100%);
    --speed-streak-light: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.28) 55%, rgba(255, 255, 255, 0) 100%);
    --media-protection-top: linear-gradient(180deg, rgba(4, 6, 15, 0.88), rgba(4, 6, 15, 0));
    --media-protection-bottom: linear-gradient(0deg, rgba(4, 6, 15, 0.94) 0%, rgba(4, 6, 15, 0.5) 45%, rgba(4, 6, 15, 0) 100%);

    --focus-ring: 0 0 0 var(--stroke-focus-ring-offset) var(--surface-app), 0 0 0 calc(var(--stroke-focus-ring) + var(--stroke-focus-ring-offset)) var(--border-focus);

    --space-0: 0px;
    --space-1: 2px;
    --space-2: 4px;
    --space-3: 8px;
    --space-4: 12px;
    --space-5: 16px;
    --space-6: 20px;
    --space-7: 24px;
    --space-8: 32px;
    --space-9: 40px;
    --space-10: 48px;
    --space-11: 64px;
    --space-12: 80px;
    --space-13: 104px;
    --space-14: 136px;
    --gap-inline: 8px;
    --gap-tight: 12px;
    --gap-normal: 16px;
    --gap-section: 32px;
    --gap-block: 64px;
    --pad-control-y: 10px;
    --pad-control-x: 16px;
    --pad-card: 20px;
    --pad-sheet: 24px;
    --pad-screen-mobile: 20px;
    --pad-screen-web: 32px;

    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 14px;
    --radius-xxl: 22px;
    --radius-pill: 999px;
    --radius-chip: var(--radius-xs);
    --radius-control: var(--radius-sm);
    --radius-input: var(--radius-sm);
    --radius-card: var(--radius-lg);
    --radius-tile: var(--radius-lg);
    --radius-sheet: var(--radius-xl);
    --radius-modal: var(--radius-lg);
    --radius-media: var(--radius-xl);
    --radius-tag: var(--radius-pill);

    --content-width: 1200px;
    --prose-width: 520px;
    --sidebar-width: 264px;
    --top-bar-height: 64px;
    --tab-bar-height: 76px;
    --control-height: 40px;
    --control-height-sm: 32px;
    --control-height-lg: 52px;
    --touch-target: 44px;

    --stroke-hairline: 1px;
    --stroke-focus-ring: 2px;
    --stroke-focus-ring-offset: 2px;
    --stroke-field-focus-ring: 3px;
    --rail-width: 4px;

    --notch-sm: 6px;
    --notch-md: 10px;
    --notch-lg: 24px;
    --notch-top-left: 14px;

    --blur-sm: 8px;
    --blur-md: 18px;
    --blur-lg: 28px;
    --blur-xl: 40px;
    --blur-card: var(--blur-md);
    --blur-bar: var(--blur-lg);
    --blur-modal: 32px;
    --blur-scrim: var(--blur-sm);
    --saturation-card: 1.3;
    --saturation-bar: 1.4;
    --saturation-modal: 1.3;
    --saturation-none: 1;

    --opacity-disabled: 0.38;
    --opacity-hover-overlay: 0.06;

    --duration-instant: 80ms;
    --duration-fast: 140ms;
    --duration-base: 220ms;
    --duration-slow: 420ms;
    --duration-slower: 560ms;
    --duration-cinematic: 800ms;
    --duration-hover: var(--duration-fast);
    --duration-press: var(--duration-instant);
    --duration-enter: var(--duration-base);
    --duration-sheet: var(--duration-slow);
    --duration-reward: var(--duration-slow);
    --duration-streak: var(--duration-cinematic);
    --duration-toast: 5s;

    --ease-throttle: cubic-bezier(0.16, 0.84, 0.24, 1);
    --ease-brake: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-snap: cubic-bezier(0.22, 1.3, 0.36, 1);
    --ease-standard: var(--ease-throttle);
    --ease-out: var(--ease-throttle);
    --ease-incoming: var(--ease-brake);
    --ease-spring: var(--ease-snap);

    --hatch-angle: 115deg;
    --hatch-stripe: 6px;
    --hatch-period: 14px;
    --hatch-dense-stripe: 3px;
    --hatch-dense-period: 8px;
    --grid-cell: 40px;
    --grid-line-width: 1px;
    --streak-width: 42%;
    --streak-skew: -18.33deg;
    --skew-speed: -8deg;
    --press-scale-control: 0.985;
    --press-scale-tile: 0.99;
    --hover-lift: -2px;
    --enter-slide: 32px;

    --icon-inline: 16px;
    --icon-control: 18px;
    --icon-base: 20px;
    --icon-nav: 24px;
    --icon-feature: 28px;

    --font-display: Ethnocentric, "Arial Black", sans-serif;
    --font-sans: Raleway, system-ui, sans-serif;
    --font-mono: "DM Mono", ui-monospace, monospace;
    --fs-xxxs: 0.625rem;
    --fs-xxs: 0.6875rem;
    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --fs-md: 1.125rem;
    --fs-lg: 1.25rem;
    --fs-xl: 1.625rem;
    --fs-xxl: 2.125rem;
    --fs-xxxl: 2.75rem;
    --fs-x4l: 3.75rem;
    --fs-x5l: 4.75rem;
    --fs-x6l: 6rem;
    --fs-step-row: 0.8125rem;
    --fs-step-title: 0.9375rem;
    --fs-step-feature: 1.0625rem;
    --fs-step-hero: 1.375rem;
    --lh-display: 0.96;
    --lh-tight: 1.1;
    --lh-snug: 1.25;
    --lh-normal: 1.5;
    --lh-relaxed: 1.55;
    --tracking-tightest: 0em;
    --tracking-tight: 0.01em;
    --tracking-normal: 0em;
    --tracking-display: 0.01em;
    --tracking-title: 0.02em;
    --tracking-wide: 0.04em;
    --tracking-caps: 0.14em;
    --tracking-label: 0.16em;
    --tracking-caps-wide: 0.18em;
    --text-scale: 1;
  }

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

    --surface-app: #edf1f8;
    --surface-lowest: #e1e7f2;
    --surface-low: #f3f6fb;
    --surface: #f8fafd;
    --surface-high: #fcfdfe;
    --surface-highest: #ffffff;
    --surface-glass: rgba(255, 255, 255, 0.74);
    --surface-glass-high: rgba(255, 255, 255, 0.86);
    --surface-glass-bar: rgba(255, 255, 255, 0.8);
    --surface-scrim: rgba(11, 18, 32, 0.46);
    --primary-container: var(--orange-100);
    --primary-container-hover: var(--orange-200);
    --on-primary-container: var(--orange-800);
    --data-container: var(--bleu-100);
    --data-container-hover: var(--bleu-200);
    --on-data-container: var(--bleu-800);
    --go-container: rgba(135, 190, 76, 0.16);
    --on-go-container: var(--vert-700);
    --error-container: rgba(224, 43, 29, 0.1);
    --on-error-container: var(--error-700);
    --live-container: rgba(253, 97, 1, 0.14);
    --on-live-container: var(--orange-700);
    --surface-field: rgba(4, 6, 15, 0.05);
    --surface-field-hover: rgba(4, 6, 15, 0.08);
    --state-hover: rgba(4, 6, 15, 0.06);
    --state-press: rgba(4, 6, 15, 0.1);
    --state-selected: rgba(253, 97, 1, 0.12);
    --state-hover-on-accent: rgba(255, 255, 255, 0.14);
    --state-press-on-accent: rgba(4, 6, 15, 0.16);
    --text-primary: var(--ink-950);
    --text-body: var(--ink-800);
    --text-muted: var(--ink-500);
    --text-faint: var(--ink-400);
    --icon-faint: var(--ink-300);
    --text-accent: var(--orange-700);
    --text-accent-bright: var(--orange-700);
    --text-on-accent: var(--ink-0);
    --text-data: var(--bleu-700);
    --text-on-data: var(--ink-1000);
    --text-go: var(--vert-700);
    --text-danger: var(--error-600);
    --text-on-danger: var(--ink-0);
    --text-on-media: var(--ink-0);
    --text-on-media-muted: var(--ink-200);
    --link: var(--orange-700);
    --link-hover: var(--orange-600);
    --link-press: var(--orange-800);
    --accent-quiet: rgba(253, 97, 1, 0.12);
    --accent-bright: var(--orange-600);
    --data-quiet: rgba(1, 179, 243, 0.12);
    --data-bright: var(--bleu-600);
    --status-go-quiet: rgba(135, 190, 76, 0.14);
    --status-danger-quiet: rgba(224, 43, 29, 0.1);
    --border-hairline: rgba(4, 6, 15, 0.12);
    --border-subtle: rgba(4, 6, 15, 0.18);
    --border-strong: rgba(4, 6, 15, 0.3);
    --border-accent: rgba(253, 97, 1, 0.55);
    --border-focus: var(--orange-600);
    --border-on-accent: var(--orange-600);
    --border-data: rgba(1, 179, 243, 0.5);
    --border-on-data: var(--bleu-600);
    --border-error: rgba(142, 20, 16, 0.45);
    --divider: rgba(4, 6, 15, 0.1);
    --divider-strong: rgba(4, 6, 15, 0.16);
    --grid-line: rgba(4, 6, 15, 0.07);
    --sheen-lit: rgba(255, 255, 255, 0.65);
    --sheen-quiet: rgba(255, 255, 255, 0.4);

    --elevation-1: 0 1px 3px rgba(4, 6, 15, 0.1);
    --elevation-2: 0 1px 3px rgba(4, 6, 15, 0.1);
    --elevation-3: 0 8px 20px rgba(4, 6, 15, 0.12);
    --elevation-4: 0 20px 48px rgba(4, 6, 15, 0.16);
    --elevation-5: 0 20px 48px rgba(4, 6, 15, 0.16);
    --glow-accent: 0 0 24px rgba(253, 97, 1, 0.28);
    --glow-accent-soft: 0 0 28px rgba(253, 97, 1, 0.18);
    --glow-data: 0 0 24px rgba(1, 179, 243, 0.26);
    --glow-data-soft: 0 0 28px rgba(1, 179, 243, 0.16);
    --glow-danger: 0 0 20px rgba(224, 43, 29, 0.22);
    --bloom-accent: 0 6px 18px -8px rgba(253, 97, 1, 0.5);
    --bloom-data: 0 6px 18px -8px rgba(1, 179, 243, 0.4);
    --bloom-danger: 0 6px 18px -8px rgba(224, 43, 29, 0.45);

    --grad-accent: linear-gradient(115deg, #fd6101, #c94a00);
    --grad-accent-soft: linear-gradient(115deg, rgba(253, 97, 1, 0.16), rgba(214, 79, 0, 0.08));
    --grad-data-soft: linear-gradient(115deg, rgba(1, 179, 243, 0.16), rgba(0, 144, 198, 0.08));
    --grad-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.52));
    --grad-track-glow: radial-gradient(120% 120% at 50% 0%, rgba(253, 97, 1, 0.14) 0%, rgba(255, 255, 255, 0) 70%);
    --speed-streak-light: linear-gradient(90deg, rgba(4, 6, 15, 0) 0%, rgba(4, 6, 15, 0.14) 55%, rgba(4, 6, 15, 0) 100%);
  }
}