/**
 * tokens.css
 * ----------
 * Single source of truth for design tokens (colors, radii, shadows) shared by
 * every page. Load this before any page-specific stylesheet.
 *
 * Light values live on :root. Dark values are applied two ways:
 *   1. Automatically via prefers-color-scheme, when the user hasn't chosen
 *      an explicit theme (no data-theme attribute, or data-theme="light").
 *   2. Explicitly via [data-theme="dark"], set by theme.js / the inline
 *      head script, which always wins over the system preference.
 */

:root {
  --bg-base: #f4f0e8;
  --bg-top: #e8f3ef;
  --ink: #1d2a24;
  --ink-soft: #53625c;
  --panel: rgba(255, 255, 255, 0.8);
  --panel-solid: #ffffff;
  --line: rgba(20, 50, 40, 0.15);
  --accent: #0f766e;
  --accent-strong: #0a645e;
  --accent-2: #b45309;
  --accent-soft: #e7f3f2;
  --danger: #b42318;
  --danger-soft: #fdf0ec;
  --ok: #19734d;
  --ok-soft: #eaf8f0;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 18px 40px rgba(28, 47, 38, 0.14);
  --focus-ring: rgba(15, 118, 110, 0.35);
  --scrim: rgba(15, 23, 20, 0.5);
  --color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-base: #121815;
    --bg-top: #16211c;
    --ink: #eef3f0;
    --ink-soft: #a9b7b0;
    --panel: rgba(24, 33, 29, 0.82);
    --panel-solid: #1b241f;
    --line: rgba(200, 220, 210, 0.14);
    --accent: #2dd4bf;
    --accent-strong: #5eead4;
    --accent-2: #f59e0b;
    --accent-soft: rgba(45, 212, 191, 0.16);
    --danger: #f87171;
    --danger-soft: rgba(248, 113, 113, 0.16);
    --ok: #4ade80;
    --ok-soft: rgba(74, 222, 128, 0.16);
    --shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
    --focus-ring: rgba(45, 212, 191, 0.45);
    --scrim: rgba(0, 0, 0, 0.6);
    --color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg-base: #121815;
  --bg-top: #16211c;
  --ink: #eef3f0;
  --ink-soft: #a9b7b0;
  --panel: rgba(24, 33, 29, 0.82);
  --panel-solid: #1b241f;
  --line: rgba(200, 220, 210, 0.14);
  --accent: #2dd4bf;
  --accent-strong: #5eead4;
  --accent-2: #f59e0b;
  --accent-soft: rgba(45, 212, 191, 0.16);
  --danger: #f87171;
  --danger-soft: rgba(248, 113, 113, 0.16);
  --ok: #4ade80;
  --ok-soft: rgba(74, 222, 128, 0.16);
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
  --focus-ring: rgba(45, 212, 191, 0.45);
  --scrim: rgba(0, 0, 0, 0.6);
  --color-scheme: dark;
}

html {
  color-scheme: var(--color-scheme);
}