/* ============================================================
   Dark Jazz Age — design tokens
   Generated. Every color pairing in here is contrast-audited;
   the 6 chart series pass CVD separation in both modes.
   Dark is the primary mode; light is the "playbill" mode.
   ============================================================ */

:root {
  /* ---- primitive ramps (never reference these in components) ---- */
  --color-sapphire-100: #E3EEFE;
  --color-sapphire-200: #C5DBFC;
  --color-sapphire-300: #9ABFFA;
  --color-sapphire-400: #659EF8;
  --color-sapphire-500: #3C7FE5;
  --color-sapphire-550: #2E70D6;
  --color-sapphire-600: #2062C7;
  --color-sapphire-700: #0C49A0;
  --color-sapphire-800: #053274;
  --color-sapphire-900: #011D4B;
  --color-teal-100: #C1F9FE;
  --color-teal-200: #67F0FC;
  --color-teal-300: #37D5E1;
  --color-teal-400: #2CB2BD;
  --color-teal-500: #02939D;
  --color-teal-550: #01848D;
  --color-teal-600: #00767E;
  --color-teal-700: #10595F;
  --color-teal-800: #083F43;
  --color-teal-900: #022629;
  --color-emerald-100: #BEFEDE;
  --color-emerald-200: #6AF8BC;
  --color-emerald-300: #48DBA2;
  --color-emerald-400: #2CB985;
  --color-emerald-500: #22986D;
  --color-emerald-550: #1E8861;
  --color-emerald-600: #157A56;
  --color-emerald-700: #105D41;
  --color-emerald-800: #08412C;
  --color-emerald-900: #022819;
  --color-brass-100: #FEEBC4;
  --color-brass-200: #FCD37D;
  --color-brass-300: #E5B64A;
  --color-brass-400: #C49726;
  --color-brass-500: #A17B1D;
  --color-brass-550: #916F19;
  --color-brass-600: #836202;
  --color-brass-700: #634A0D;
  --color-brass-800: #463406;
  --color-brass-900: #2B1E01;
  --color-copper-100: #FEE8DE;
  --color-copper-200: #FCCDB9;
  --color-copper-300: #FAA680;
  --color-copper-400: #E08256;
  --color-copper-500: #C06539;
  --color-copper-550: #B1582B;
  --color-copper-600: #A24A1C;
  --color-copper-700: #7F350C;
  --color-copper-800: #5B2405;
  --color-copper-900: #391301;
  --color-garnet-100: #FEE6E9;
  --color-garnet-200: #FCCAD2;
  --color-garnet-300: #FAA0B0;
  --color-garnet-400: #F5688A;
  --color-garnet-500: #D3496E;
  --color-garnet-550: #C33A61;
  --color-garnet-600: #B42A54;
  --color-garnet-700: #8F133E;
  --color-garnet-800: #67092A;
  --color-garnet-900: #410318;
  --color-amethyst-100: #F1E8FE;
  --color-amethyst-200: #E3CFFC;
  --color-amethyst-300: #CFAAFA;
  --color-amethyst-400: #B97CF8;
  --color-amethyst-500: #9C5DD8;
  --color-amethyst-550: #8E4FC9;
  --color-amethyst-600: #8141BA;
  --color-amethyst-700: #67229D;
  --color-amethyst-800: #4B0C77;
  --color-amethyst-900: #2E044D;
  --color-ink-50: #EAEFF5;
  --color-ink-100: #D0D8E4;
  --color-ink-200: #B2BBC9;
  --color-ink-300: #9099A7;
  --color-ink-400: #707885;
  --color-ink-500: #545B66;
  --color-ink-600: #3F4550;
  --color-ink-700: #2C333E;
  --color-ink-800: #1C232F;
  --color-ink-850: #121A25;
  --color-ink-900: #09111D;
  --color-ink-950: #020713;
  --color-paper: #F7F1E6;
  --color-paper-raised: #FDFAF3;
  --color-paper-sunken: #EEE7D9;

  /* ---- type ---- */
  --font-display: 'Josefin Sans', 'Futura', 'Century Gothic', sans-serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 21px;
  --text-2xl: 25px;
  --text-3xl: 31px;
  --text-4xl: 39px;
  --text-5xl: 49px;
  --text-6xl: 61px;
  --leading-tight: 1.06;
  --leading-snug: 1.2;
  --leading-ui: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
  --tracking-display: -0.022em;
  --tracking-tight: -0.011em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.14em;
  --tracking-caps-wide: 0.22em;

  /* ---- space / radius ---- */
  --space-0: 0;
  --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;
  --space-10: 128px;
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 5px;
  --radius-pill: 999px;

  /* ---- semantic: DARK is the default ---- */
  --color-bg: #09111D;
  --color-bg-surface: #121A25;
  --color-bg-raised: #1C232F;
  --color-bg-sunken: #020713;
  --color-bg-overlay: rgba(2, 7, 19, 0.72);
  --color-fg: #D0D8E4;
  --color-fg-secondary: #B2BBC9;
  --color-fg-muted: #9099A7;
  --color-fg-disabled: #707885;
  --color-fg-inverse: #020713;
  --color-accent: #E5B64A;
  --color-accent-quiet: #836202;
  --color-link: #9ABFFA;
  --color-line: #2C333E;
  --color-line-strong: #3F4550;
  --color-line-control: #707885;
  --color-focus: #E5B64A;
  --color-primary: #2062C7;
  --color-primary-hover: #2E70D6;
  --color-primary-active: #0C49A0;
  --color-on-primary: #FFFFFF;
  --color-success: #48DBA2;
  --color-success-bg: #022819;
  --color-success-line: #105D41;
  --color-warning: #FAA680;
  --color-warning-bg: #391301;
  --color-warning-line: #7F350C;
  --color-danger: #FAA0B0;
  --color-danger-bg: #410318;
  --color-danger-line: #8F133E;
  --color-danger-solid: #B42A54;
  --color-info: #9ABFFA;
  --color-info-bg: #011D4B;
  --color-info-line: #0C49A0;
  --color-series-1: #3C7FE5;
  --color-series-2: #22986D;
  --color-series-3: #836202;
  --color-series-4: #D3496E;
  --color-series-5: #9C5DD8;
  --color-series-6: #C06539;
  --color-seq-1: #0C49A0;
  --color-seq-2: #2062C7;
  --color-seq-3: #3C7FE5;
  --color-seq-4: #659EF8;
  --color-seq-5: #9ABFFA;
  --color-seq-6: #C5DBFC;
  --shadow-1: 0 1px 2px rgba(2,7,19,.6);
  --shadow-2: 0 2px 8px rgba(2,7,19,.65), 0 0 0 1px rgba(229,182,74,.06);
  --shadow-3: 0 12px 32px rgba(2,7,19,.7), 0 0 0 1px rgba(229,182,74,.09);
  color-scheme: dark;
}

/* System light preference — unless an explicit dark choice overrides it. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --color-bg: #F7F1E6;
    --color-bg-surface: #FDFAF3;
    --color-bg-raised: #FFFFFF;
    --color-bg-sunken: #EEE7D9;
    --color-bg-overlay: rgba(9, 17, 29, 0.48);
    --color-fg: #09111D;
    --color-fg-secondary: #2C333E;
    --color-fg-muted: #545B66;
    --color-fg-disabled: #707885;
    --color-fg-inverse: #FFFFFF;
    --color-accent: #634A0D;
    --color-accent-quiet: #C49726;
    --color-link: #0C49A0;
    --color-line: #B2BBC9;
    --color-line-strong: #9099A7;
    --color-line-control: #707885;
    --color-focus: #836202;
    --color-primary: #2062C7;
    --color-primary-hover: #0C49A0;
    --color-primary-active: #053274;
    --color-on-primary: #FFFFFF;
    --color-success: #105D41;
    --color-success-bg: #BEFEDE;
    --color-success-line: #2CB985;
    --color-warning: #7F350C;
    --color-warning-bg: #FEE8DE;
    --color-warning-line: #E08256;
    --color-danger: #8F133E;
    --color-danger-bg: #FEE6E9;
    --color-danger-line: #F5688A;
    --color-danger-solid: #8F133E;
    --color-info: #0C49A0;
    --color-info-bg: #E3EEFE;
    --color-info-line: #659EF8;
    --color-series-1: #3C7FE5;
    --color-series-2: #22986D;
    --color-series-3: #836202;
    --color-series-4: #D3496E;
    --color-series-5: #9C5DD8;
    --color-series-6: #C06539;
    --color-seq-1: #659EF8;
    --color-seq-2: #3C7FE5;
    --color-seq-3: #2062C7;
    --color-seq-4: #0C49A0;
    --color-seq-5: #053274;
    --color-seq-6: #011D4B;
    --shadow-1: 0 1px 2px rgba(9,17,29,.07);
    --shadow-2: 0 2px 8px rgba(9,17,29,.09);
    --shadow-3: 0 12px 32px rgba(9,17,29,.13);
    color-scheme: light;
  }
}

/* Explicit choice wins in both directions. */
:root[data-theme="light"] {
  --color-bg: #F7F1E6;
  --color-bg-surface: #FDFAF3;
  --color-bg-raised: #FFFFFF;
  --color-bg-sunken: #EEE7D9;
  --color-bg-overlay: rgba(9, 17, 29, 0.48);
  --color-fg: #09111D;
  --color-fg-secondary: #2C333E;
  --color-fg-muted: #545B66;
  --color-fg-disabled: #707885;
  --color-fg-inverse: #FFFFFF;
  --color-accent: #634A0D;
  --color-accent-quiet: #C49726;
  --color-link: #0C49A0;
  --color-line: #B2BBC9;
  --color-line-strong: #9099A7;
  --color-line-control: #707885;
  --color-focus: #836202;
  --color-primary: #2062C7;
  --color-primary-hover: #0C49A0;
  --color-primary-active: #053274;
  --color-on-primary: #FFFFFF;
  --color-success: #105D41;
  --color-success-bg: #BEFEDE;
  --color-success-line: #2CB985;
  --color-warning: #7F350C;
  --color-warning-bg: #FEE8DE;
  --color-warning-line: #E08256;
  --color-danger: #8F133E;
  --color-danger-bg: #FEE6E9;
  --color-danger-line: #F5688A;
  --color-danger-solid: #8F133E;
  --color-info: #0C49A0;
  --color-info-bg: #E3EEFE;
  --color-info-line: #659EF8;
  --color-series-1: #3C7FE5;
  --color-series-2: #22986D;
  --color-series-3: #836202;
  --color-series-4: #D3496E;
  --color-series-5: #9C5DD8;
  --color-series-6: #C06539;
  --color-seq-1: #659EF8;
  --color-seq-2: #3C7FE5;
  --color-seq-3: #2062C7;
  --color-seq-4: #0C49A0;
  --color-seq-5: #053274;
  --color-seq-6: #011D4B;
  --shadow-1: 0 1px 2px rgba(9,17,29,.07);
  --shadow-2: 0 2px 8px rgba(9,17,29,.09);
  --shadow-3: 0 12px 32px rgba(9,17,29,.13);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --color-bg: #09111D;
  --color-bg-surface: #121A25;
  --color-bg-raised: #1C232F;
  --color-bg-sunken: #020713;
  --color-bg-overlay: rgba(2, 7, 19, 0.72);
  --color-fg: #D0D8E4;
  --color-fg-secondary: #B2BBC9;
  --color-fg-muted: #9099A7;
  --color-fg-disabled: #707885;
  --color-fg-inverse: #020713;
  --color-accent: #E5B64A;
  --color-accent-quiet: #836202;
  --color-link: #9ABFFA;
  --color-line: #2C333E;
  --color-line-strong: #3F4550;
  --color-line-control: #707885;
  --color-focus: #E5B64A;
  --color-primary: #2062C7;
  --color-primary-hover: #2E70D6;
  --color-primary-active: #0C49A0;
  --color-on-primary: #FFFFFF;
  --color-success: #48DBA2;
  --color-success-bg: #022819;
  --color-success-line: #105D41;
  --color-warning: #FAA680;
  --color-warning-bg: #391301;
  --color-warning-line: #7F350C;
  --color-danger: #FAA0B0;
  --color-danger-bg: #410318;
  --color-danger-line: #8F133E;
  --color-danger-solid: #B42A54;
  --color-info: #9ABFFA;
  --color-info-bg: #011D4B;
  --color-info-line: #0C49A0;
  --color-series-1: #3C7FE5;
  --color-series-2: #22986D;
  --color-series-3: #836202;
  --color-series-4: #D3496E;
  --color-series-5: #9C5DD8;
  --color-series-6: #C06539;
  --color-seq-1: #0C49A0;
  --color-seq-2: #2062C7;
  --color-seq-3: #3C7FE5;
  --color-seq-4: #659EF8;
  --color-seq-5: #9ABFFA;
  --color-seq-6: #C5DBFC;
  --shadow-1: 0 1px 2px rgba(2,7,19,.6);
  --shadow-2: 0 2px 8px rgba(2,7,19,.65), 0 0 0 1px rgba(229,182,74,.06);
  --shadow-3: 0 12px 32px rgba(2,7,19,.7), 0 0 0 1px rgba(229,182,74,.09);
  color-scheme: dark;
}