/*
 * Design tokens for the slivce-node visual system.
 *
 * Accent: dark blue, per explicit direction from the project owner - a
 * black page background, blue-gray "window" (card/sheet) surfaces, and
 * dark-blue buttons. Same accent hue is reused in both themes (dark blue
 * reads clearly against both near-black and near-white), so the toggle
 * doesn't jump between unrelated identities.
 *
 * The Wordle tile colors (--tile-correct/present/absent) are deliberately
 * untouched - they're the game's own recognizable color language, not part
 * of the site's UI-chrome brand color.
 *
 * Three-state theme structure (system light / system dark / explicit
 * override via data-theme, set by js/theme.js from localStorage):
 * bare :root is the light default, the media query covers system dark
 * unless an explicit light choice overrides it, and [data-theme="dark"]
 * covers the explicit toggle.
 */

:root {
  --ink: #1a1f2e;
  --ink-soft: #545b70;
  --ink-faint: #7c8296;
  --paper: #eef1f6;
  --surface: #ffffff;
  --surface-sunken: #eef1f7;
  --line: #d7dce6;
  --line-strong: #bcc3d1;
  --accent: #2f4f9e;
  --accent-strong: #24407f;
  --accent-soft: #e4eaf7;
  --accent-ink: #fdfdf9;
  --tile-correct: #6aaa64;
  --tile-present: #c9b458;
  --tile-absent: #787c7e;
  --danger: #b23a34;
  --danger-soft: #fbe9e7;

  --serif: Georgia, "Times New Roman", "PT Serif", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-card: 0 1px 2px rgba(26, 31, 46, 0.06), 0 10px 28px rgba(26, 31, 46, 0.08);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #eef0f5;
    --ink-soft: #a9aec0;
    --ink-faint: #7b8098;
    --paper: #0a0a0d;
    --surface: #1b2130;
    --surface-sunken: #141924;
    --line: #2a3244;
    --line-strong: #3a4359;
    --accent: #2f4f9e;
    --accent-strong: #3f63b8;
    --accent-soft: rgba(63, 99, 184, 0.18);
    --accent-ink: #f5f7fb;
    --danger: #e2887f;
    --danger-soft: rgba(178, 58, 52, 0.16);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 28px rgba(0, 0, 0, 0.5);
  }
}

:root[data-theme="dark"] {
  --ink: #eef0f5;
  --ink-soft: #a9aec0;
  --ink-faint: #7b8098;
  --paper: #0a0a0d;
  --surface: #1b2130;
  --surface-sunken: #141924;
  --line: #2a3244;
  --line-strong: #3a4359;
  --accent: #2f4f9e;
  --accent-strong: #3f63b8;
  --accent-soft: rgba(63, 99, 184, 0.18);
  --accent-ink: #f5f7fb;
  --danger: #e2887f;
  --danger-soft: rgba(178, 58, 52, 0.16);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 28px rgba(0, 0, 0, 0.5);
}