/* Layout: a one-screen player (top bar, stage, caption strip, control bar);
   the chrome borrows the characters' look: ink outlines and flat "sticker"
   shadows. The stage keeps its own illustrated world in both themes. */
:root {
  --paper: #FBF4E6;
  --surface: #FFFFFF;
  --surface-2: #F3EAD8;
  --ink: #2E2240;
  --muted: #625775;
  --line: #2E2240;
  --shadow: #2E2240;
  --accent: #5A48DF;
  --accent-ink: #FFFFFF;
  --focus: #5A48DF;
  --one: #2F9E77;
  --mille: #F2A516;
  --million: #EE5261;
  --milliard: #5A48DF;
  --mille-ink: #8A5300;
  --million-ink: #B3263A;
  --milliard-ink: #4636C9;
  --good: #1D7A4C;
  --good-bg: #DDF5E7;
  --warn-bg: #FFF1D6;
  --stage-frame: #1E1733;
  --caption-bg: #1E1733;
  --caption-ink: #FFF8EA;
  --scrim: rgba(30, 23, 51, 0.55);
  /* the stage is an illustrated world: same look in both themes */
  --stage-bg: #FFF8EA;
  --stage-card: #FFFDF7;
  --stage-ink: #2E2240;
  --stage-line: #B9AFCB;
  --stage-hover: #FFEBC2;
  --stage-accent: #5A48DF;
  --stage-on-accent: #FFFFFF;
  --stage-mille: #F2A516;
  --stage-mille-hover: #FFBE3D;
  --stage-million: #EE5261;
  --stage-milliard: #5A48DF;
  --stage-mille-ink: #8A5300;
  --stage-million-ink: #B3263A;
  --stage-milliard-ink: #4636C9;
  --stage-good: #1D7A4C;
  --stage-good-bg: #DDF5E7;
  --stage-muted: #5C536B;
  --stage-muted-bg: #E4DDEA;
  --stage-scrim: rgba(30, 23, 51, 0.6);
  --stage-scrim-deep: rgba(20, 14, 40, 0.5);
  --stage-flag: rgba(46, 34, 64, 0.82);
  --radius: 18px;
  --stroke: 2.5px;
  --lift: 4px;
  --font-display: "Baloo 2", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --font-body: "Andika", "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
  --step--1: clamp(0.82rem, 0.78rem + 0.2vw, 0.92rem);
  --step-0: clamp(0.98rem, 0.94rem + 0.25vw, 1.1rem);
  --step-1: clamp(1.12rem, 1rem + 0.6vw, 1.45rem);
  --step-2: clamp(1.35rem, 1.1rem + 1.2vw, 2.1rem);
  --step-3: clamp(1.7rem, 1.2rem + 2.4vw, 3.2rem);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #150F26;
    --surface: #221A3A;
    --surface-2: #2C2349;
    --ink: #F4EFFF;
    --muted: #BDB3D3;
    --line: #9C8FC4;
    --shadow: #05030C;
    --accent: #A89BFF;
    --accent-ink: #150F26;
    --focus: #C9C0FF;
    --one: #7DDDB6;
    --mille: #FFB83D;
    --million: #FF7582;
    --milliard: #A89BFF;
    --mille-ink: #FFC96B;
    --million-ink: #FF9CA6;
    --milliard-ink: #C4BAFF;
    --good: #7EE0A8;
    --good-bg: #173524;
    --warn-bg: #3A2C12;
    --stage-frame: #07050F;
    --caption-bg: #07050F;
    --caption-ink: #FFF8EA;
    --scrim: rgba(5, 3, 12, 0.62);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper: #150F26;
  --surface: #221A3A;
  --surface-2: #2C2349;
  --ink: #F4EFFF;
  --muted: #BDB3D3;
  --line: #9C8FC4;
  --shadow: #05030C;
  --accent: #A89BFF;
  --accent-ink: #150F26;
  --focus: #C9C0FF;
  --one: #7DDDB6;
  --mille: #FFB83D;
  --million: #FF7582;
  --milliard: #A89BFF;
  --mille-ink: #FFC96B;
  --million-ink: #FF9CA6;
  --milliard-ink: #C4BAFF;
  --good: #7EE0A8;
  --good-bg: #173524;
  --warn-bg: #3A2C12;
  --stage-frame: #07050F;
  --caption-bg: #07050F;
  --caption-ink: #FFF8EA;
  --scrim: rgba(5, 3, 12, 0.62);
  color-scheme: dark;
}