/*
 * Design tokens — THE one source (kit Directive 17). No inline hex anywhere else.
 *
 * Canon: saturated accents on SMALL areas over a near-neutral, gridded ground
 * (design-canon-colour.md). The warm ground matches the project's document
 * palette. --color-link is reserved for links ONLY — distinct from every
 * accent and status color, so color = meaning stays unambiguous.
 */

:root {
  /* Ground & ink (light) */
  --color-bg: #faf8f4;
  --color-surface: #f2eee6;
  --color-ink: #1c1a17;
  --color-muted: #6e675c;
  --color-rule: #d9d2c6;

  /* Brand accent — small areas only (buttons, active states, key highlights) */
  --color-accent: #4338ca;
  --color-accent-ink: #faf8f4;

  /* Dedicated link color — links only, nowhere else */
  --color-link: #a21caf;

  /* Status */
  --color-ok: #15803d;
  --color-warn: #b45309;
  --color-danger: #b3261e;

  /* Type — generous default (kit Directive 18); modular scale, ratio 1.2
     (typography canon §3: "don't compose without a scale", ≤7 steps) */
  --font-sans: "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;
  --text-base: 1.125rem; /* 18px at browser default */
  --fs-caption: 0.833rem; /* 1 ÷ 1.2 */
  --fs-body: 1rem;
  --fs-lead: 1.2rem;
  --fs-h2: 1.44rem;
  --fs-h1: 1.728rem;
  --leading: 1.5; /* body 1.4–1.5 (typography canon §2) */
  --leading-tight: 1.15; /* headings 1.05–1.25 */
  --measure: 66ch; /* body measure target (typography canon §1) */

  /* Space & shape — 4px grid */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --radius: 6px;
  --focus-ring: 2px solid var(--color-accent);
}

/* Text-size setting (S/M/L/XL), persisted per device — html[data-textsize] */
html[data-textsize="s"] { font-size: 88.9%; }   /* 16px base */
html[data-textsize="m"] { font-size: 100%; }    /* 18px base (default) */
html[data-textsize="l"] { font-size: 111.1%; }  /* 20px base */
html[data-textsize="xl"] { font-size: 122.2%; } /* 22px base */

/* Dark theme — html[data-theme="dark"] */
html[data-theme="dark"] {
  --color-bg: #1b1917;
  --color-surface: #262220;
  --color-ink: #ede9e3;
  --color-muted: #a49b8d;
  --color-rule: #3a342e;
  --color-accent: #818cf8;
  --color-accent-ink: #1b1917;
  --color-link: #e879f9;
  --color-ok: #4ade80;
  --color-warn: #fbbf24;
  --color-danger: #f87171;
}