/* System preference also works without JavaScript. theme.js applies explicit choices before paint. */
:root {
  color-scheme: light;
  --bg: #f6f7f1;
  --panel: #fffef9;
  --line: #d3dace;
  --muted: #556451;
  --text: #222d24;
  --accent: #426128;
  --subtle: #40513b;
  --quiet: #5e6e59;
  --soft-border: #a4b49a;
  --art-grid: #dce3d6;
  --art-ink: #556e42;
  --art-dim: #7c8b72;
  --accent-soft: #658c3020;
  --cover-edge: #a3b396;
  --sage: #426128;
  --sage-cover: #e3ecd8;
  --lilac: #654e8c;
  --lilac-cover: #eee7f7;
  --player: #f3f5ed;
  --control: #e5eadf;
  --control-hover: #d5dfcb;
  --selected-ink: #fffdf6;
  --wave: #a5b298;
  --warning: #925014;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #141916;
  --panel: #1b211d;
  --line: #343e35;
  --muted: #abb6a9;
  --text: #edf1e7;
  --accent: #d5ed99;
  --subtle: #c6cfc0;
  --quiet: #94a18c;
  --soft-border: #516044;
  --art-grid: #2c352c;
  --art-ink: #a8bc93;
  --art-dim: #6b7c69;
  --accent-soft: #b5d57e14;
  --cover-edge: #ffffff0e;
  --sage: #d5ed99;
  --sage-cover: #2e3c2c;
  --lilac: #ccc1ee;
  --lilac-cover: #343045;
  --player: #151a16;
  --control: #242c24;
  --control-hover: #354132;
  --selected-ink: #1e291a;
  --wave: #4d5e47;
  --warning: #f0c292;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #141916;
    --panel: #1b211d;
    --line: #343e35;
    --muted: #abb6a9;
    --text: #edf1e7;
    --accent: #d5ed99;
    --subtle: #c6cfc0;
    --quiet: #94a18c;
    --soft-border: #516044;
    --art-grid: #2c352c;
    --art-ink: #a8bc93;
    --art-dim: #6b7c69;
    --accent-soft: #b5d57e14;
    --cover-edge: #ffffff0e;
    --sage: #d5ed99;
    --sage-cover: #2e3c2c;
    --lilac: #ccc1ee;
    --lilac-cover: #343045;
    --player: #151a16;
    --control: #242c24;
    --control-hover: #354132;
    --selected-ink: #1e291a;
    --wave: #4d5e47;
    --warning: #f0c292;
  }
}