/* GENERATED from option2-ds by apps/api/scripts/extract-tokens.mjs.
 * DO NOT EDIT. Change tokens.json in the design system and re-run the script.
 *
 * Derived, not copied: the design system remains the source of truth, and a
 * token change here is one command away rather than a hunt through hardcoded
 * hexes. See truths/design-sources.md.
 *
 * Dark is the lead theme and is not an inversion of light -- both are declared
 * in full. Light is declared LAST so [data-theme] flips both directions.
 */

:root {
  --o2-purple: #7048E8;
  --o2-red: #E03131;
  --o2-green: #12B886;
  --o2-charcoal: #161513;
  --o2-cream: #F2EFE9;
  --o2-purple-050: #F3F0FF;
  --o2-purple-100: #E5DBFF;
  --o2-purple-200: #D0BFFF;
  --o2-purple-300: #B197FC;
  --o2-purple-400: #9775FA;
  --o2-purple-500: #845EF7;
  --o2-purple-600: #7048E8;
  --o2-purple-700: #5F3DC4;
  --o2-purple-800: #4A2F9C;
  --o2-purple-900: #3B2683;
  --o2-red-100: #FFE3E3;
  --o2-red-300: #FF8787;
  --o2-red-400: #FF6B6B;
  --o2-red-600: #E03131;
  --o2-red-700: #C92A2A;
  --o2-red-800: #B02525;
  --o2-red-900: #8F1F1F;
  --o2-green-100: #C3FAE8;
  --o2-green-300: #63E6BE;
  --o2-green-400: #38D9A9;
  --o2-green-600: #12B886;
  --o2-green-700: #0CA678;
  --o2-green-800: #099268;
  --o2-green-900: #087F5B;
  --o2-green-950: #056A4C;
  --o2-amber-600: #F59F00;
  --o2-amber-400: #FFC94D;
  --o2-amber-100: #FFF3BF;
  --o2-amber-800: #AD7300;
  --o2-amber-900: #8A5A00;
  --o2-cyan-600: #15AABF;
  --o2-cyan-400: #3BC9DB;
  --o2-cyan-100: #C5F6FA;
  --o2-cyan-800: #0F8A9B;
  --o2-cyan-900: #0B7285;
  --o2-char-950: #100F0D;
  --o2-char-900: #161513;
  --o2-char-800: #211F1C;
  --o2-char-700: #2B2925;
  --o2-char-600: #35322D;
  --o2-char-500: #57534B;
  --o2-char-400: #8A8578;
  --o2-char-300: #ABA69D;
  --o2-cream-100: #FAF8F3;
  --o2-cream-200: #F2EFE9;
  --o2-cream-300: #EBE6DC;
  --o2-cream-400: #E3DDD1;
  --o2-cream-500: #C9C2B4;
  --o2-font-hero: 'Bungee','Barlow Condensed',sans-serif;
  --o2-font-condensed: 'Barlow Condensed','Arial Narrow',sans-serif;
  --o2-font-body: 'Barlow','Helvetica Neue',sans-serif;
  --o2-font-data: 'IBM Plex Mono','Courier New',monospace;
  --font-hero: var(--o2-font-hero);
  --font-condensed: var(--o2-font-condensed);
  --font-body: var(--o2-font-body);
  --font-data: var(--o2-font-data);
  --hero-weight: 400;
  --hero-tracking: 0.01em;
  --hero-leading: 1.05;
  --hero-transform: uppercase;
  --heading-weight: 700;
  --heading-leading: 1.15;
  --heading-tracking: -0.01em;
  --text-hero-xl: 80px;
  --text-hero-lg: 60px;
  --text-hero-md: 40px;
  --text-hero-sm: 28px;
  --text-h1: 34px;
  --text-h2: 26px;
  --text-h3: 20px;
  --text-h4: 17px;
  --text-body-lg: 18px;
  --text-body-md: 15.5px;
  --text-body-sm: 13.5px;
  --text-data: 13px;
  --text-data-lg: 26px;
  --text-label: 11px;
  --body-leading: 1.6;
  --label-tracking: 0.1em;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --page-pad: 48px;
  --page-max: 1200px;
  --radius-sharp: 0px;
  --radius-pill: 999px;
  --btn-depth: 5px;
  --btn-depth-press: 1px;
  --btn-press: 4px;
  --border-w: 1.5px;
  --border-w-strong: 2px;
  --border-w-hairline: 1px;
  --shadow-none: none;
  --focus-offset: 2px;
  --ease-snap: cubic-bezier(.2,.9,.3,1);
  --dur-fast: 120ms;
  --dur-med: 200ms;
  --chart-6: #9775FA;
  --chart-7: #74B816;
  --chart-8: #E64980;
  --chart-9: #868E96;
  --chart-alt-1: #7048E8;
  --chart-alt-2: #12B886;
  --chart-alt-3: #F59F00;
  --chart-alt-4: #E64980;
  --chart-alt-5: #15AABF;
}

[data-theme="dark"] {
  --button-outline: rgba(255,255,255, .10);
  --badge-outline: rgba(255,255,255, .05);
  --opaque-button-border-intensity: 9;
  --elevate-1: rgba(255,255,255, .04);
  --elevate-2: rgba(255,255,255, .09);
  --background: 40 7.3% 8%;
  --foreground: 40 25.7% 93.1%;
  --border: 37 8.2% 19.2%;
  --card: 36 8.2% 12%;
  --card-foreground: 40 25.7% 93.1%;
  --sidebar: 36 8.2% 12%;
  --sidebar-foreground: 40 25.7% 93.1%;
  --sidebar-border: 37 8.2% 19.2%;
  --sidebar-primary: 255 77.7% 59.6%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 254 55% 33.1%;
  --sidebar-accent-foreground: 255 94.4% 79%;
  --sidebar-ring: 255 94.4% 79%;
  --popover: 36 8.2% 12%;
  --popover-foreground: 40 25.7% 93.1%;
  --primary: 255 77.7% 59.6%;
  --primary-foreground: 0 0% 100%;
  --secondary: 40 7.5% 15.7%;
  --secondary-foreground: 40 25.7% 93.1%;
  --muted: 40 7.5% 15.7%;
  --muted-foreground: 39 7.7% 64.3%;
  --accent: 254 55% 33.1%;
  --accent-foreground: 255 94.4% 79%;
  --destructive: 0 100% 71%;
  --destructive-foreground: 0 0% 100%;
  --input: 37 8.2% 19.2%;
  --ring: 255 94.4% 79%;
  --chart-1: 255 77.7% 59.6%;
  --chart-2: 162 82.2% 39.6%;
  --chart-3: 39 100% 48%;
  --chart-4: 187 80.2% 41.6%;
  --chart-5: 21 90.2% 47.8%;
  --surface-ground: var(--o2-char-900);
  --surface-card: var(--o2-char-800);
  --surface-sunken: var(--o2-char-950);
  --surface-inverse: var(--o2-cream-200);
  --border-default: var(--o2-char-600);
  --border-strong: var(--o2-cream-200);
  --border-subtle: var(--o2-char-700);
  --border-hover: var(--o2-char-500);
  --text-body: var(--o2-cream-200);
  --text-muted: var(--o2-char-300);
  --text-faint: var(--o2-char-400);
  --text-placeholder: #8F8A7C;
  --text-inverse: var(--o2-charcoal);
  --text-on-accent: #FFFFFF;
  --accent-base: var(--o2-purple-600);
  --accent-hover: var(--o2-purple-500);
  --accent-active: var(--o2-purple-400);
  --accent-soft: var(--o2-purple-900);
  --accent-strong-text: var(--o2-purple-300);
  --marker: var(--o2-red-600);
  --marker-text: var(--o2-red-400);
  --hot: var(--o2-red-600);
  --hot-hover: var(--o2-red-800);
  --destructive-action: var(--status-danger);
  --destructive-action-hover: var(--o2-red-300);
  --destructive-action-active: var(--o2-red-400);
  --destructive-deep: var(--o2-red-900);
  --text-on-destructive: var(--o2-charcoal);
  --confirm: var(--status-success);
  --confirm-hover: var(--o2-green-300);
  --confirm-active: var(--o2-green-400);
  --confirm-deep: var(--o2-green-950);
  --text-on-confirm: var(--o2-charcoal);
  --accent-deep: var(--o2-purple-900);
  --hot-deep: var(--o2-red-900);
  --depth-neutral: var(--o2-char-600);
  --link: var(--o2-purple-300);
  --link-hover: var(--o2-purple-200);
  --status-success: var(--o2-green-400);
  --status-success-text: var(--o2-green-400);
  --status-warning: var(--o2-amber-400);
  --status-warning-text: var(--o2-amber-400);
  --status-danger: var(--o2-red-400);
  --status-info: var(--o2-cyan-400);
  --status-info-text: var(--o2-cyan-400);
  --scrollbar-track: var(--surface-ground);
  --scrollbar-thumb: var(--o2-char-500);
  --scrollbar-thumb-hover: var(--o2-char-400);
  --focus-ring: var(--o2-purple-300);
  --focus-outline: 2px solid var(--focus-ring);
  --suit-tile: url('./assets/patterns/suit-tile-dark.svg');
  --sidebar-primary-border: hsl(var(--sidebar-primary));
  --sidebar-primary-border: hsl(from hsl(var(--sidebar-primary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
  --sidebar-accent-border: hsl(var(--sidebar-accent));
  --sidebar-accent-border: hsl(from hsl(var(--sidebar-accent)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
  --primary-border: hsl(var(--primary));
  --primary-border: hsl(from hsl(var(--primary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
  --secondary-border: hsl(var(--secondary));
  --secondary-border: hsl(from hsl(var(--secondary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
  --muted-border: hsl(var(--muted));
  --muted-border: hsl(from hsl(var(--muted)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
  --accent-border: hsl(var(--accent));
  --accent-border: hsl(from hsl(var(--accent)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
  --destructive-border: hsl(var(--destructive));
  --destructive-border: hsl(from hsl(var(--destructive)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
  --card-border: hsl(var(--card));
  --popover-border: hsl(var(--popover));
}

[data-theme="light"] {
  --button-outline: rgba(0,0,0, .10);
  --badge-outline: rgba(0,0,0, .05);
  --opaque-button-border-intensity: -8;
  --elevate-1: rgba(0,0,0, .03);
  --elevate-2: rgba(0,0,0, .08);
  --background: 40 25.7% 93.1%;
  --foreground: 40 7.3% 8%;
  --border: 40 24.3% 85.5%;
  --card: 0 0% 100%;
  --card-foreground: 40 7.3% 8%;
  --sidebar: 43 41.2% 96.7%;
  --sidebar-foreground: 40 7.3% 8%;
  --sidebar-border: 40 24.3% 85.5%;
  --sidebar-primary: 255 77.7% 59.6%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 257 100% 92.9%;
  --sidebar-accent-foreground: 255 53.4% 50.4%;
  --sidebar-ring: 255 93% 72%;
  --popover: 0 0% 100%;
  --popover-foreground: 40 7.3% 8%;
  --primary: 255 77.7% 59.6%;
  --primary-foreground: 0 0% 100%;
  --secondary: 40 27.3% 89.2%;
  --secondary-foreground: 40 7.3% 8%;
  --muted: 40 27.3% 89.2%;
  --muted-foreground: 41 9.7% 38.2%;
  --accent: 257 100% 92.9%;
  --accent-foreground: 255 53.4% 50.4%;
  --destructive: 0 65.4% 47.6%;
  --destructive-foreground: 0 0% 100%;
  --input: 40 16.3% 74.7%;
  --ring: 255 93% 72%;
  --chart-1: 255 77.7% 59.6%;
  --chart-2: 162 82.2% 39.6%;
  --chart-3: 39 100% 48%;
  --chart-4: 187 80.2% 41.6%;
  --chart-5: 21 90.2% 47.8%;
  --surface-ground: var(--o2-cream-200);
  --surface-card: #FFFFFF;
  --surface-sunken: var(--o2-cream-300);
  --surface-inverse: var(--o2-char-900);
  --border-default: var(--o2-cream-400);
  --border-strong: var(--o2-charcoal);
  --border-subtle: var(--o2-cream-300);
  --border-hover: var(--o2-char-400);
  --text-body: var(--o2-charcoal);
  --text-muted: #565045;
  --text-faint: #6F695A;
  --text-placeholder: #7B7464;
  --text-inverse: var(--o2-cream-200);
  --text-on-accent: #FFFFFF;
  --accent-base: var(--o2-purple-600);
  --accent-hover: var(--o2-purple-700);
  --accent-active: var(--o2-purple-800);
  --accent-soft: var(--o2-purple-100);
  --accent-strong-text: var(--o2-purple-700);
  --marker: var(--o2-red-600);
  --marker-text: var(--o2-red-700);
  --hot: var(--o2-red-600);
  --hot-hover: var(--o2-red-700);
  --destructive-action: var(--status-danger);
  --destructive-action-hover: var(--o2-red-800);
  --destructive-action-active: var(--o2-red-900);
  --destructive-deep: var(--o2-red-900);
  --text-on-destructive: #FFFFFF;
  --confirm: var(--status-success-text);
  --confirm-hover: var(--o2-green-900);
  --confirm-active: var(--o2-green-950);
  --confirm-deep: var(--o2-green-950);
  --text-on-confirm: #FFFFFF;
  --accent-deep: var(--o2-purple-800);
  --hot-deep: var(--o2-red-900);
  --depth-neutral: var(--o2-cream-500);
  --link: var(--o2-purple-700);
  --link-hover: var(--o2-purple-800);
  --status-success: var(--o2-green-800);
  --status-success-text: var(--o2-green-950);
  --status-warning: var(--o2-amber-800);
  --status-warning-text: var(--o2-amber-900);
  --status-danger: var(--o2-red-700);
  --status-info: var(--o2-cyan-800);
  --status-info-text: var(--o2-cyan-900);
  --scrollbar-track: var(--surface-ground);
  --scrollbar-thumb: var(--o2-cream-500);
  --scrollbar-thumb-hover: var(--o2-char-400);
  --focus-ring: var(--o2-purple-400);
  --focus-outline: 2px solid var(--focus-ring);
  --suit-tile: url('./assets/patterns/suit-tile-light.svg');
  --sidebar-primary-border: hsl(from hsl(var(--sidebar-primary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
  --sidebar-accent-border: hsl(from hsl(var(--sidebar-accent)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
  --primary-border: hsl(from hsl(var(--primary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
  --secondary-border: hsl(from hsl(var(--secondary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
  --muted-border: hsl(from hsl(var(--muted)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
  --accent-border: hsl(from hsl(var(--accent)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
  --destructive-border: hsl(from hsl(var(--destructive)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
  --card-border: hsl(var(--card));
  --popover-border: hsl(var(--popover));
}