/*
 * Muse Studio Lite tokens: "machine view / instrument HUD".
 * Graphite paper, one signal colour (HUD red), state colours that differ in lightness as
 * well as hue. OKLCH, light and dark through light-dark() + color-scheme.
 */
/* Geist and Geist Mono 1.3.1 (SIL OFL 1.1, fonts/OFL-Geist.txt), self-hosted: the CSP
   allows fonts from 'self' only. */
@font-face { font-family: "Geist"; src: url("fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: light dark;

  /* paper and ink */
  --bg: light-dark(oklch(0.975 0.004 80), oklch(0.19 0.008 260));
  --bg-raised: light-dark(oklch(0.995 0.002 80), oklch(0.23 0.01 260));
  --ink: light-dark(oklch(0.22 0.01 260), oklch(0.93 0.006 80));
  --ink-2: light-dark(oklch(0.42 0.012 260), oklch(0.78 0.01 80));
  --muted: light-dark(oklch(0.48 0.012 260), oklch(0.72 0.01 260));
  --rule: light-dark(oklch(0.58 0.012 260), oklch(0.6 0.012 260));
  --rule-soft: light-dark(oklch(0.89 0.006 260), oklch(0.32 0.012 260));
  --soft: light-dark(oklch(0.94 0.008 70), oklch(0.27 0.012 260));

  /* signal: the only accent colour */
  --signal: light-dark(oklch(0.53 0.22 28), oklch(0.68 0.23 28));
  --signal-ink: light-dark(oklch(0.99 0 0), oklch(0.17 0.02 28));
  --signal-soft: light-dark(oklch(0.95 0.03 28), oklch(0.3 0.08 28));
  --link: light-dark(oklch(0.48 0.2 28), oklch(0.75 0.17 28));

  /* states: ok / partial / down, distinct in lightness */
  --ok: light-dark(oklch(0.48 0.13 150), oklch(0.82 0.19 150));
  --ok-soft: light-dark(oklch(0.95 0.04 150), oklch(0.3 0.06 150));
  --partial: light-dark(oklch(0.55 0.13 70), oklch(0.83 0.15 80));
  --partial-soft: light-dark(oklch(0.96 0.05 85), oklch(0.32 0.06 80));
  --down: light-dark(oklch(0.5 0.01 260), oklch(0.62 0.01 260));

  /* warm accent for illustrations (the owner's prop) */
  --warm: light-dark(oklch(0.58 0.14 55), oklch(0.8 0.13 70));
  --cloth: light-dark(oklch(0.9 0.035 40), oklch(0.36 0.05 30));

  /* skin, five tones; features are drawn with --face-ink on every tone (>= 3:1) */
  --skin-1: light-dark(oklch(0.9 0.035 65), oklch(0.84 0.04 65));
  --skin-2: light-dark(oklch(0.82 0.06 62), oklch(0.77 0.06 62));
  --skin-3: light-dark(oklch(0.72 0.08 58), oklch(0.69 0.08 58));
  --skin-4: light-dark(oklch(0.63 0.09 52), oklch(0.61 0.09 52));
  --skin-5: light-dark(oklch(0.55 0.08 45), oklch(0.55 0.08 45));
  --face-ink: oklch(0.17 0.02 40);
  --hair-dark: light-dark(oklch(0.3 0.02 50), oklch(0.3 0.02 50));
  --hair-mid: light-dark(oklch(0.45 0.06 55), oklch(0.45 0.06 55));
  --hair-light: light-dark(oklch(0.78 0.08 80), oklch(0.72 0.08 80));
  --hair-grey: light-dark(oklch(0.86 0.005 260), oklch(0.8 0.005 260));

  /* type */
  --font: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* shape and motion */
  --chamfer: 10px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur: 200ms;
}
[data-theme="light"], :root[data-theme="light"] { color-scheme: light; }
[data-theme="dark"], :root[data-theme="dark"] { color-scheme: dark; }

/*
 * Palettes, chosen in the header (cookie `palette`, rendered as <html data-palette>).
 * Each one sets both tones through light-dark(); every text pair is >= 4.5:1 and every
 * meaning-carrying stroke >= 3:1 in both modes (tests/test_themes.py). Skin tones and the
 * face lines stay the same in every palette.
 */
:root[data-palette="warm"] {
  --bg: light-dark(oklch(0.96 0.02 80), oklch(0.2 0.015 55));
  --bg-raised: light-dark(oklch(0.985 0.012 80), oklch(0.24 0.018 55));
  --ink: light-dark(oklch(0.25 0.03 45), oklch(0.94 0.02 80));
  --ink-2: light-dark(oklch(0.4 0.035 45), oklch(0.82 0.025 75));
  --muted: light-dark(oklch(0.46 0.03 50), oklch(0.75 0.025 70));
  --rule: light-dark(oklch(0.58 0.03 55), oklch(0.62 0.03 60));
  --rule-soft: light-dark(oklch(0.87 0.02 70), oklch(0.33 0.02 55));
  --soft: light-dark(oklch(0.92 0.025 75), oklch(0.28 0.02 55));
  --signal: light-dark(oklch(0.5 0.15 40), oklch(0.72 0.15 50));
  --signal-ink: light-dark(oklch(0.99 0.005 80), oklch(0.18 0.02 50));
  --signal-soft: light-dark(oklch(0.93 0.04 50), oklch(0.32 0.06 45));
  --link: light-dark(oklch(0.46 0.14 40), oklch(0.78 0.13 55));
  --ok: light-dark(oklch(0.45 0.11 145), oklch(0.8 0.15 140));
  --ok-soft: light-dark(oklch(0.93 0.04 140), oklch(0.31 0.05 140));
  --partial: light-dark(oklch(0.52 0.12 75), oklch(0.84 0.13 85));
  --partial-soft: light-dark(oklch(0.94 0.05 85), oklch(0.33 0.05 80));
  --down: light-dark(oklch(0.5 0.02 60), oklch(0.62 0.02 60));
  --warm: light-dark(oklch(0.55 0.13 55), oklch(0.8 0.12 70));
}
:root[data-palette="green"] {
  --bg: light-dark(oklch(0.97 0.012 150), oklch(0.19 0.015 165));
  --bg-raised: light-dark(oklch(0.99 0.006 150), oklch(0.23 0.018 165));
  --ink: light-dark(oklch(0.24 0.03 165), oklch(0.94 0.015 150));
  --ink-2: light-dark(oklch(0.39 0.035 165), oklch(0.82 0.025 150));
  --muted: light-dark(oklch(0.46 0.03 165), oklch(0.75 0.025 155));
  --rule: light-dark(oklch(0.57 0.035 165), oklch(0.62 0.035 160));
  --rule-soft: light-dark(oklch(0.88 0.02 155), oklch(0.32 0.02 165));
  --soft: light-dark(oklch(0.93 0.025 150), oklch(0.27 0.02 165));
  --signal: light-dark(oklch(0.47 0.11 170), oklch(0.78 0.13 165));
  --signal-ink: light-dark(oklch(0.99 0.005 150), oklch(0.17 0.02 165));
  --signal-soft: light-dark(oklch(0.93 0.04 165), oklch(0.31 0.05 165));
  --link: light-dark(oklch(0.43 0.1 175), oklch(0.8 0.12 165));
  /* ok must not read as the signal here: it is blue, and still lighter/darker by mode */
  --ok: light-dark(oklch(0.45 0.13 255), oklch(0.8 0.1 250));
  --ok-soft: light-dark(oklch(0.94 0.03 250), oklch(0.31 0.05 255));
  --partial: light-dark(oklch(0.53 0.12 70), oklch(0.84 0.13 85));
  --partial-soft: light-dark(oklch(0.95 0.05 85), oklch(0.32 0.05 80));
  --down: light-dark(oklch(0.5 0.02 165), oklch(0.62 0.02 165));
  --warm: light-dark(oklch(0.55 0.13 55), oklch(0.8 0.12 70));
}
:root[data-palette="contrast"] {
  --bg: light-dark(oklch(1 0 0), oklch(0 0 0));
  --bg-raised: light-dark(oklch(1 0 0), oklch(0.13 0 0));
  --ink: light-dark(oklch(0 0 0), oklch(1 0 0));
  --ink-2: light-dark(oklch(0.2 0 0), oklch(0.93 0 0));
  --muted: light-dark(oklch(0.3 0 0), oklch(0.86 0 0));
  --rule: light-dark(oklch(0.3 0 0), oklch(0.8 0 0));
  --rule-soft: light-dark(oklch(0.55 0 0), oklch(0.5 0 0));
  --soft: light-dark(oklch(0.95 0 0), oklch(0.18 0 0));
  --signal: light-dark(oklch(0.42 0.2 28), oklch(0.8 0.16 50));
  --signal-ink: light-dark(oklch(1 0 0), oklch(0 0 0));
  --signal-soft: light-dark(oklch(0.95 0.03 28), oklch(0.25 0.06 40));
  --link: light-dark(oklch(0.38 0.2 265), oklch(0.85 0.12 230));
  --ok: light-dark(oklch(0.38 0.12 150), oklch(0.88 0.17 150));
  --ok-soft: light-dark(oklch(0.96 0.04 150), oklch(0.22 0.05 150));
  --partial: light-dark(oklch(0.45 0.11 65), oklch(0.9 0.15 90));
  --partial-soft: light-dark(oklch(0.96 0.05 90), oklch(0.24 0.05 80));
  --down: light-dark(oklch(0.35 0 0), oklch(0.75 0 0));
  --warm: light-dark(oklch(0.45 0.13 50), oklch(0.85 0.12 75));
}