/*
 * Design tokens for the app UI (not the exported image — its colours live in src/config.js).
 *
 * Light values are the default. Dark values apply when the OS prefers dark mode,
 * or when <html data-theme="dark"> forces it (data-theme="light" forces light).
 */

:root {
  --font: 'DM Sans', Inter, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --bg: #f6f5f2; /* page background */
  --surface: #ffffff; /* cards, inputs, panels */
  --soft: #f1efea; /* hover background inside lists */
  --line: #e4e1da; /* borders and dividers */
  --line-strong: #cfcbc2; /* hovered borders, dashed outlines */
  --text: #1a1917;
  --muted: #6f6b62; /* secondary text, icons — ≥ 4.5:1 on --bg, --surface and --soft (WCAG AA) */
  --ink: #1a1917; /* filled controls (primary button, selected segment) */
  --on-ink: #ffffff; /* text on --ink */
  --accent: #e8553a; /* focus rings, icons, large text (≥ 3:1) */
  --accent-text: #bb3e26; /* small accent text such as links and errors (≥ 4.5:1) */
  --dot: rgba(26, 25, 23, 0.09);

  --canvas-shadow: 0 1px 2px rgba(26, 25, 23, 0.06), 0 12px 32px rgba(26, 25, 23, 0.12);
  --pop-shadow: 0 10px 30px rgba(26, 25, 23, 0.12);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #111110;
    --surface: #191918;
    --soft: #222220;
    --line: #2c2b28;
    --line-strong: #3e3c38;
    --text: #ecebe7;
    --muted: #9b978d;
    --ink: #ecebe7;
    --on-ink: #111110;
    --accent: #ff7052;
    --accent-text: #ff7052;
    --dot: rgba(236, 235, 231, 0.08);
    --canvas-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 12px 32px rgba(0, 0, 0, 0.5);
    --pop-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}

/* Keep in sync with the dark block above. */
:root[data-theme='dark'] {
  --bg: #111110;
  --surface: #191918;
  --soft: #222220;
  --line: #2c2b28;
  --line-strong: #3e3c38;
  --text: #ecebe7;
  --muted: #9b978d;
  --ink: #ecebe7;
  --on-ink: #111110;
  --accent: #ff7052;
  --accent-text: #ff7052;
  --dot: rgba(236, 235, 231, 0.08);
  --canvas-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 12px 32px rgba(0, 0, 0, 0.5);
  --pop-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}