:root {
  --bg: #e9f2f7;
  --surface: #ffffff;
  --surface-2: #f4f8fb;
  --ink: #071f3a;
  --ink-body: #142638;
  --ink-muted: #587080;
  --accent: #0c6ccc;
  --accent-deep: #0c3c84;
  --brand-blue: #0474c8;
  --brand-blue-hover: #054494;
  --link: #0c3c84;
  --rule: #cbd2d9;
  --tint: #9dc8de;
  --teal: #1a9292;
  --overlay: rgba(7, 31, 58, 0.45);
  --focus: #0474c8;
  --on-brand: #f5f7fa;
  --scheme: light;
  --cta-hover: #0c3c84;
  --stage-grad: linear-gradient(180deg, #0b8dfd 0%, #0c6ccc 45%, #0c3c84 100%);
  --grade: rgba(12, 60, 132, 0.94);
  --grade-mid: rgba(12, 60, 132, 0.55);
  --grade-solid: rgb(12, 60, 132);
  --header: rgba(12, 60, 132, 0.45);
  --on-media: #ffffff;
  --on-media-muted: #cfe9ff;
  --accent-media: #c5ffff;
  --btn-media-bg: #ffffff;
  --btn-media-ink: #0c3c84;
  --bar: linear-gradient(90deg, #c5ffff, #0b8dfd 55%, transparent);
  --bar-paper: linear-gradient(90deg, #0b8dfd, #c5ffff 70%, transparent);
  --slash: rgba(197, 255, 255, 0.35);
  --rail: rgba(207, 233, 255, 0.3);
  --waterline: #b03a2e;
  --radius: 2px;
  --ghost-border: rgba(255, 255, 255, 0.6);
  --ghost-fill: rgba(255, 255, 255, 0.14);
  --rail-idle: rgba(255, 255, 255, 0.5);
  --word-grad: linear-gradient(90deg, var(--accent-media), var(--on-media) 90%);
  --stage: #0c3c84;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="bright"]) {
    --bg: #000918;
    --surface: #061222;
    --surface-2: #0c1f36;
    --ink: #f5f7fa;
    --ink-body: #f5f7fa;
    --ink-muted: #9aafc3;
    --accent: #55d9c4;
    --accent-deep: #1a9292;
    --brand-blue: #073785;
    --brand-blue-hover: #0b4aa8;
    --link: #26a6d7;
    --rule: rgba(154, 175, 195, 0.3);
    --tint: #0146a1;
    --teal: #1a9292;
    --overlay: rgba(0, 9, 24, 0.55);
    --focus: #55d9c4;
    --on-brand: #f5f7fa;
    --scheme: dark;
    --cta-hover: #0b4aa8;
    --stage-grad: linear-gradient(180deg, #03101f 0%, #0b2a4a 100%);
    --grade: rgba(0, 9, 24, 0.94);
    --grade-mid: rgba(0, 9, 24, 0.55);
    --grade-solid: rgb(0, 9, 24);
    --header: rgba(0, 9, 24, 0.45);
    --on-media: #ffffff;
    --on-media-muted: #9aafc3;
    --accent-media: #55d9c4;
    --btn-media-bg: #0474c8;
    --btn-media-ink: #f5f7fa;
    --bar: linear-gradient(90deg, #55d9c4, #1a9292 55%, transparent);
    --bar-paper: linear-gradient(90deg, #55d9c4, #1a9292 70%, transparent);
    --slash: rgba(1, 70, 161, 0.35);
    --rail: rgba(183, 199, 214, 0.25);
    --waterline: #b03a2e;
    --radius: 2px;
    --ghost-border: rgba(255, 255, 255, 0.6);
    --ghost-fill: rgba(255, 255, 255, 0.14);
    --rail-idle: rgba(255, 255, 255, 0.5);
    --word-grad: linear-gradient(90deg, var(--accent-media), var(--on-media) 90%);
    --stage: #000918;
  }
}

:root[data-theme="dark"] {
  --bg: #000918;
  --surface: #061222;
  --surface-2: #0c1f36;
  --ink: #f5f7fa;
  --ink-body: #f5f7fa;
  --ink-muted: #9aafc3;
  --accent: #55d9c4;
  --accent-deep: #1a9292;
  --brand-blue: #073785;
  --brand-blue-hover: #0b4aa8;
  --link: #26a6d7;
  --rule: rgba(154, 175, 195, 0.3);
  --tint: #0146a1;
  --teal: #1a9292;
  --overlay: rgba(0, 9, 24, 0.55);
  --focus: #55d9c4;
  --on-brand: #f5f7fa;
  --scheme: dark;
  --cta-hover: #0b4aa8;
  --stage-grad: linear-gradient(180deg, #03101f 0%, #0b2a4a 100%);
  --grade: rgba(0, 9, 24, 0.94);
  --grade-mid: rgba(0, 9, 24, 0.55);
  --grade-solid: rgb(0, 9, 24);
  --header: rgba(0, 9, 24, 0.45);
  --on-media: #ffffff;
  --on-media-muted: #9aafc3;
  --accent-media: #55d9c4;
  --btn-media-bg: #0474c8;
  --btn-media-ink: #f5f7fa;
  --bar: linear-gradient(90deg, #55d9c4, #1a9292 55%, transparent);
  --bar-paper: linear-gradient(90deg, #55d9c4, #1a9292 70%, transparent);
  --slash: rgba(1, 70, 161, 0.35);
  --rail: rgba(183, 199, 214, 0.25);
  --waterline: #b03a2e;
  --radius: 2px;
  --ghost-border: rgba(255, 255, 255, 0.6);
  --ghost-fill: rgba(255, 255, 255, 0.14);
  --rail-idle: rgba(255, 255, 255, 0.5);
  --word-grad: linear-gradient(90deg, var(--accent-media), var(--on-media) 90%);
  --stage: #000918;
}

html {
  color-scheme: var(--scheme);
}