/* Generated by Scripts/generate_theme.py from Shared/theme.json. Edit the JSON, then run the script. */
/* Clinical Light: the default, and whenever the viewer chooses Light. */
:root {
  color-scheme: light;
  --canvas: #F3F5F9;
  --canvas-deep: #E6EAF1;
  --surface: #FFFFFF;
  --surface-raised: #EAEFF6;
  --hero: #FFFFFF;
  --input: #FFFFFF;
  --line: rgb(14 26 43 / 0.1);
  --line-strong: rgb(14 26 43 / 0.15);
  --edge: rgb(14 26 43 / 0.1);
  --chip: rgb(14 26 43 / 0.04);
  --text: #0E1A2B;
  --text-soft: #33425A;
  --muted: #5A6679;
  --eyebrow: #52628A;
  --accent: #1F55E6;
  --on-accent: #FFFFFF;
  --accent-label: #1B4FD8;
  --info: #4D6FA8;
  --success: #0F7A48;
  --on-success: #FFFFFF;
  --danger: #C8372C;
  --on-danger: #FFFFFF;
  --on-tone: #0E1A2B;
  --glass-edge: #6E84AA;
  --shadow: rgb(20 38 74 / 0.1);
  --glow: rgb(31 85 230 / 0.1);
  --glow-secondary: rgb(23 162 184 / 0.06);
  --device-frame: #C9D0DB;
  --glass-alpha: 86%;
  --glass-alpha-strong: 96%;
  --hero-alpha: 94%;
  --tint-soft: 8%;
  --tint-line: 28%;
  --chart-mix: 36%;
  --track-mix: 11%;
  --disabled-mix: 7%;
  --switch-mix: 20%;
  --shadow-card: 0 10px 28px rgb(20 38 74 / .08);
  --shadow-soft: 0 4px 14px rgb(20 38 74 / .05);
  --shadow-nav: 0 6px 24px rgb(20 38 74 / .12);
  --shadow-device: 0 38px 90px rgb(20 38 72 / .20), 0 0 0 1px rgb(14 26 43 / .10), inset 0 1px 0 rgb(255 255 255 / .9);
  --inset-hi: rgb(255 255 255 / .9);
  --inset-lo: rgb(255 255 255 / .75);
  --sheen: rgb(31 85 230 / .045);
  --overlay: rgb(14 26 43 / .32);
}

/* Cobalt: when the device is in dark mode, unless the viewer chose Light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-appearance="light"]) {
    color-scheme: dark;
    --canvas: #0F1216;
    --canvas-deep: #090B0E;
    --surface: #1D232C;
    --surface-raised: #262D38;
    --hero: #212833;
    --input: #151A21;
    --line: rgb(255 255 255 / 0.1);
    --line-strong: rgb(255 255 255 / 0.16);
    --edge: rgb(255 255 255 / 0.17);
    --chip: rgb(255 255 255 / 0.06);
    --text: #F3F5F8;
    --text-soft: #C8CFD9;
    --muted: #9EA8B6;
    --eyebrow: #92A3C6;
    --accent: #3366FF;
    --on-accent: #FFFFFF;
    --accent-label: #86A8FF;
    --info: #9FB6DC;
    --success: #5FDC9B;
    --on-success: #062616;
    --danger: #FF8F87;
    --on-danger: #3A0F0C;
    --on-tone: #0E1A2B;
    --glass-edge: #C9DBFF;
    --shadow: rgb(0 0 0 / 0.2);
    --glow: rgb(51 102 255 / 0.22);
    --glow-secondary: rgb(111 211 255 / 0.06);
    --device-frame: #3B4049;
    --glass-alpha: 72%;
    --glass-alpha-strong: 88%;
    --hero-alpha: 78%;
    --tint-soft: 12%;
    --tint-line: 26%;
    --chart-mix: 46%;
    --track-mix: 8%;
    --disabled-mix: 9%;
    --switch-mix: 24%;
    --shadow-card: 0 12px 30px rgb(0 0 0 / .18);
    --shadow-soft: 0 8px 18px rgb(0 0 0 / .07);
    --shadow-nav: 0 5px 25px rgb(0 0 0 / .24);
    --shadow-device: 0 38px 100px rgb(0 0 0 / .5), 0 0 0 1px rgb(255 255 255 / .10), inset 0 1px 0 rgb(255 255 255 / .18);
    --inset-hi: rgb(255 255 255 / .10);
    --inset-lo: rgb(255 255 255 / .045);
    --sheen: rgb(255 255 255 / .06);
    --overlay: rgb(3 6 12 / .64);
  }
}

/* Cobalt: whenever the viewer chooses Dark. */
:root[data-appearance="dark"] {
  color-scheme: dark;
  --canvas: #0F1216;
  --canvas-deep: #090B0E;
  --surface: #1D232C;
  --surface-raised: #262D38;
  --hero: #212833;
  --input: #151A21;
  --line: rgb(255 255 255 / 0.1);
  --line-strong: rgb(255 255 255 / 0.16);
  --edge: rgb(255 255 255 / 0.17);
  --chip: rgb(255 255 255 / 0.06);
  --text: #F3F5F8;
  --text-soft: #C8CFD9;
  --muted: #9EA8B6;
  --eyebrow: #92A3C6;
  --accent: #3366FF;
  --on-accent: #FFFFFF;
  --accent-label: #86A8FF;
  --info: #9FB6DC;
  --success: #5FDC9B;
  --on-success: #062616;
  --danger: #FF8F87;
  --on-danger: #3A0F0C;
  --on-tone: #0E1A2B;
  --glass-edge: #C9DBFF;
  --shadow: rgb(0 0 0 / 0.2);
  --glow: rgb(51 102 255 / 0.22);
  --glow-secondary: rgb(111 211 255 / 0.06);
  --device-frame: #3B4049;
  --glass-alpha: 72%;
  --glass-alpha-strong: 88%;
  --hero-alpha: 78%;
  --tint-soft: 12%;
  --tint-line: 26%;
  --chart-mix: 46%;
  --track-mix: 8%;
  --disabled-mix: 9%;
  --switch-mix: 24%;
  --shadow-card: 0 12px 30px rgb(0 0 0 / .18);
  --shadow-soft: 0 8px 18px rgb(0 0 0 / .07);
  --shadow-nav: 0 5px 25px rgb(0 0 0 / .24);
  --shadow-device: 0 38px 100px rgb(0 0 0 / .5), 0 0 0 1px rgb(255 255 255 / .10), inset 0 1px 0 rgb(255 255 255 / .18);
  --inset-hi: rgb(255 255 255 / .10);
  --inset-lo: rgb(255 255 255 / .045);
  --sheen: rgb(255 255 255 / .06);
  --overlay: rgb(3 6 12 / .64);
}

/* Derived tokens. One formula for both appearances; the inputs above change per appearance. */
:root {
  --surface-glass: color-mix(in srgb, var(--surface) var(--glass-alpha), transparent);
  --surface-strong: color-mix(in srgb, var(--surface) var(--glass-alpha-strong), transparent);
  --surface-solid: color-mix(in srgb, var(--surface) var(--glass-alpha), var(--canvas));
  --hero-glass: color-mix(in srgb, var(--hero) var(--hero-alpha), transparent);
  --hero-solid: color-mix(in srgb, var(--hero) var(--hero-alpha), var(--canvas));
  --nav-glass: color-mix(in srgb, var(--surface-solid) 90%, transparent);
  --accent-soft: color-mix(in srgb, var(--accent) var(--tint-soft), transparent);
  --accent-line: color-mix(in srgb, var(--accent) var(--tint-line), transparent);
  --accent-glow: color-mix(in srgb, var(--accent) 18%, transparent);
  --success-soft: color-mix(in srgb, var(--success) var(--tint-soft), transparent);
  --success-line: color-mix(in srgb, var(--success) 70%, transparent);
  --danger-soft: color-mix(in srgb, var(--danger) var(--tint-soft), transparent);
  --danger-line: color-mix(in srgb, var(--danger) 62%, transparent);
  --info-soft: color-mix(in srgb, var(--info) 7%, transparent);
  --info-line: color-mix(in srgb, var(--info) 26%, transparent);
  --chart-past: color-mix(in srgb, var(--accent-label) var(--chart-mix), var(--canvas));
  --track: color-mix(in srgb, var(--text) var(--track-mix), var(--canvas));
  --disabled: color-mix(in srgb, var(--text) var(--disabled-mix), var(--canvas));
  --switch-off: color-mix(in srgb, var(--text) var(--switch-mix), var(--canvas));
  --badge-ring: color-mix(in srgb, var(--accent) 16%, var(--canvas));
}

/* Fixed previews of each appearance for the Appearance picker. */
:root {
  --swatch-light-canvas: #F3F5F9;
  --swatch-light-surface: #FFFFFF;
  --swatch-light-accent: #1F55E6;
  --swatch-light-text: #0E1A2B;
  --swatch-dark-canvas: #0F1216;
  --swatch-dark-surface: #1D232C;
  --swatch-dark-accent: #3366FF;
  --swatch-dark-text: #F3F5F8;
}

/* Old names from the neon palette. Older markup keeps rendering; new code should use the names above. */
:root {
  --ink: var(--text);
  --white: var(--text);
  --paper: var(--canvas);
  --lime: var(--accent);
  --button-ink: var(--on-accent);
  --moss: var(--surface-solid);
  --soft: var(--surface-solid);
  --correct: var(--success);
  --wrong: var(--danger);
}