/*
 * tokens-light.css — design-system v2 · light theme (default)
 *
 * Scope: `scope/design-system.md` sectie 2 + sectie 5 shadows-light
 * Register: 3.1-3.5 + 3.5a (5 semantic kleur-rollen)
 *
 * 5 SEMANTIC KLEUR-ROLLEN:
 *   --accent  → ACTIE (burnt-sienna, grutto-broedborst — P-10)
 *   --ok      → SUCCESS/TRUST (groen)
 *   --warn    → CAUTION/UPCOMING (amber) — tijd-gerelateerd
 *   --err     → DANGER (rood)
 *   --info    → NEUTRAL CONTEXT (blauw) — pure FYI
 *
 * Beslisregel --warn vs --info: tijd-gerelateerd = warn, pure FYI = info.
 *
 * Vervallen tokens (register 13.21, NIET gebruiken):
 *   --warm, --cool, --purple
 */

:root {
  /* ─────────── CANVAS ─────────── */
  --bg: #faf7f2;              /* app background — warm crème */
  --bg-pop: #f5efe4;          /* elevated backgrounds (bijv. time-rail) */
  --card: #ffffff;            /* card surface */
  --card-elevated: #f0e8da;   /* defensive-UI card (Personal ID 5G.17) */

  /* ─────────── INK (text) ─────────── */
  --ink: #1a1613;             /* primary text — warm donker */
  --ink-secondary: #6b6358;   /* secondary text, meta-lines */
  --ink-tertiary: #a09888;    /* tertiary / placeholders */

  /* ─────────── LINES ─────────── */
  --line: #ece6dc;            /* standard border */
  --line-strong: #d6cfc2;     /* emphasized border, focused inputs */

  /* ─────────── ACCENT ─────────── */
  --accent: #c7572b;          /* burnt-sienna broedborst — P-10 */
  --accent-ink: #8f3d1a;      /* hover/press variant */
  --accent-soft: #f8ede4;     /* tinted background */

  /* ─────────── CREAM (hero highlight) ─────────── */
  --cream: #f5ede1;
  --cream-strong: #ede1cd;

  /* ─────────── 5 SEMANTIC ROLLEN ─────────── */
  /* Elk met -soft (background) + -ink (donkere variant voor contrast) */

  --ok: #2e8b57;    --ok-soft: #e8f5ed;    --ok-ink: #1a5a35;
  --warn: #a67c15;  --warn-soft: #faf1dc;  --warn-ink: #5a3f04;
  --err: #b23b3b;   --err-soft: #fbeaea;   --err-ink: #731f1f;
  --info: #4a7cbf;  --info-soft: #eef3fa;  --info-ink: #22447a;

  /* ─────────── CHROME ─────────── */
  --topbar-bg: #1F4E7D;       /* Delfts blauw — ENIGE plek dominant (3.4) */
  --topbar-ink: #ffffff;

  /* ─────────── SHADOWS (light) ─────────── */
  --sh-sm: 0 1px 2px rgba(26, 22, 19, 0.04);
  --sh-md: 0 2px 8px rgba(26, 22, 19, 0.06);
  --sh-lg: 0 8px 20px rgba(26, 22, 19, 0.08);
  --sh-xl: 0 12px 32px rgba(26, 22, 19, 0.10);
  --sh-sheet: 0 -8px 24px rgba(26, 22, 19, 0.12);  /* bottom-sheet lift */

  /* ─────────── FOCUS RING (WCAG 2.1 AA) ─────────── */
  --focus-ring:
    0 0 0 2px var(--bg),
    0 0 0 4px var(--accent);

  /* ─────────── INK ON CHROME (contrast-persistent) ─────────── */
  /* Blijft wit in beide themes — voor tekst op colored chrome (topbar,
     planner-hero, skyline-band, enz.) waar --card als text-color niet werkt
     omdat --card in dark een donkere kleur is. */
  --ink-on-chrome: #ffffff;
  --ink-on-chrome-soft: rgba(255, 255, 255, 0.78);
  --ink-on-chrome-faint: rgba(255, 255, 255, 0.60);

  /* ─────────── SKY (topbar/skyline gradient) ─────────── */
  /* Expliciete 3 kleuren voor sky-gradient zodat we per theme kunnen tunen
     zonder --info (semantiek) te muteren. */
  --sky-top: #4a7cbf;         /* same as --info in light */
  --sky-mid: #2d5e95;
  --sky-bot: #1F4E7D;         /* same as --topbar-bg in light */

  /* Browser form-control schema */
  color-scheme: light;
}