/* ============================================================
   vix-site design tokens — warm paper, serif, editorial.
   Light-first; dark theme via [data-theme="dark"] or system
   preference (unless the visitor explicitly chose light).
   ============================================================ */

:root {
  color-scheme: light;

  /* Colour — warm paper (light, default) */
  --bg: #fbf7f1;
  --bg-soft: #f4ede2;
  --surface: #fffcf7;
  --surface-hover: #f7f0e5;
  --border: #e8ddcc;
  --border-strong: #d6c6ae;
  --text: #1d1812;
  --text-muted: #6a5d4e;
  --text-faint: #9c8c78;

  /* Accent — burnt sienna. One accent only, used sparingly. */
  --accent: #9c4a21;
  --accent-hover: #7e3a17;
  --accent-soft: #f7e9dd;
  --accent-contrast: #fff9f3;

  --danger-text: #a33a2a;

  /* Type — serif throughout. Mono only for numerals, versions, hashes. */
  --font-serif: "Noto Serif SC", "Songti SC", "STSong", "Source Han Serif SC",
    "SimSun", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* Type scale (fluid). A serif reads smaller than a sans at equal size,
     so the base is nudged up and leading kept generous. */
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-h2: clamp(1.75rem, 3vw, 2.375rem);
  --text-h1: clamp(2.5rem, 5.2vw, 4rem);

  /* Spacing (4px grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;
  --space-9: 72px;
  --space-10: 96px;
  --space-11: 128px;

  /* Radius — restrained; editorial pages read better near-square. */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-pill: 999px;

  /* Shadows — barely there. Hairlines carry the structure instead. */
  --shadow-1: 0 1px 1px rgba(29, 24, 18, 0.03);
  --shadow-2: 0 2px 10px rgba(29, 24, 18, 0.055);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.16s;
  --dur-base: 0.28s;
}

/* Dark theme — explicit user choice */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #14110d;
  --bg-soft: #1b1712;
  --surface: #201b15;
  --surface-hover: #282119;
  --border: #332b21;
  --border-strong: #4a3e2f;
  --text: #f2ebe1;
  --text-muted: #b9aa96;
  --text-faint: #877968;
  --accent: #d98a5c;
  --accent-hover: #e9a176;
  --accent-soft: #2c2117;
  --accent-contrast: #1b1510;
  --danger-text: #e08a76;
  --shadow-1: 0 1px 1px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* Dark theme — follows system unless the visitor explicitly picked light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #14110d;
    --bg-soft: #1b1712;
    --surface: #201b15;
    --surface-hover: #282119;
    --border: #332b21;
    --border-strong: #4a3e2f;
    --text: #f2ebe1;
    --text-muted: #b9aa96;
    --text-faint: #877968;
    --accent: #d98a5c;
    --accent-hover: #e9a176;
    --accent-soft: #2c2117;
    --accent-contrast: #1b1510;
    --danger-text: #e08a76;
    --shadow-1: 0 1px 1px rgba(0, 0, 0, 0.3);
    --shadow-2: 0 2px 10px rgba(0, 0, 0, 0.35);
  }
}