/* Design tokens. Both colour modes come from this one file.
   Light is the default. data-theme="dark" on <html>, or on any element, switches to dark.
   Keep mode colours as plain values: a token built from another mode token, such as a
   shadow made from --ink, would not follow a data-theme set below the root. */

:root {
  /* Change with the mode */
  --bg: #e9e6df;
  --surface: #ffffff;
  --ink: #111111;
  --dim: rgba(17, 17, 17, 0.45);
  --wrong: #d92d20;
  --wrong-ink: #ffffff;
  /* A crossed-out tile: light red, with a cross in --wrong. */
  --wrong-soft: #f8d2ce;
  --veil: rgba(17, 17, 17, 0.55);
  /* Laid over the game while a part's briefing is up: the page colour, mostly opaque. */
  --scrim: rgba(233, 230, 223, 0.8);

  /* Same in both modes */
  /* The dossier's card folder. The same in both colour modes; text on it is --on-part. */
  --folder: #e3ae55;
  --folder-dark: #c98f33;
  /* A sheet of printed paper, as in the dossier: white with black print in both modes. */
  --paper: #ffffff;
  --paper-ink: #111111;
  /* The red ink of the folder's stamp. */
  --stamp: #c4281c;
  --word: #ffd60a;
  --bomb: #2ee66b;
  --vault: #4da3ff;
  --score: #ff5c8a;
  --on-part: #111111;
  --tick: #2ee66b;

  /* The bomb's four wires, in order. Text on them is --on-part. */
  --wire-red: #ff5a4f;
  --wire-blue: #4da3ff;
  --wire-green: #2ee66b;
  --wire-yellow: #ffd60a;

  /* The current part's colour. Set by data-part on any element. */
  --part: var(--word);

  /* Type */
  --font-display: 'Archivo Black', 'Arial Black', system-ui, sans-serif;
  --font-body: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;

  /* Tiles and surfaces */
  --border: 3px;
  --shadow-offset: 4px;
  --touch: 44px;
  --gutter: 20px;

  /* Motion */
  --t-fly: 0.26s;
  --t-wobble: 0.5s;
  --t-pop: 0.4s;
  --t-fade: 0.5s;
  --t-shuffle: 0.5s;
  --t-wipe: 0.7s;
  --t-press: 0.06s;

  color-scheme: light;
}

:root[data-theme='dark'],
[data-theme='dark'] {
  --bg: #0b0b0b;
  --surface: #242424;
  --ink: #ffffff;
  --dim: rgba(255, 255, 255, 0.5);
  --wrong: #ff5a4f;
  --wrong-ink: #111111;
  --wrong-soft: #4d2522;
  --scrim: rgba(11, 11, 11, 0.8);
  --veil: rgba(0, 0, 0, 0.72);
  color-scheme: dark;
}

[data-part='1'] { --part: var(--word); }
[data-part='2'] { --part: var(--bomb); }
[data-part='3'] { --part: var(--vault); }
[data-part='4'] { --part: var(--score); }