/*
 * tokens-dark.css — design-system v2 · Polder-dark (NL) / Dusk (EN+)
 *
 * Scope: `scope/design-system.md` sectie 3 + sectie 5 shadows-dark
 * Register: 3.6-3.10
 *
 * Narratief verankerd (P-10): "Polder = Dutch meadow at dusk".
 * Deep polder-green ipv cliché charcoal — brand-signature identity.
 *
 * Activatie via `.theme-dark` CSS-class op `<html>` (scope sectie 8):
 *   - OS auto-mode: JS zet class op basis van prefers-color-scheme
 *   - User-override Settings → "Polder" (NL) / "Dusk" (overig): JS zet class
 *
 * UI-label gelocaliseerd:
 *   NL = "Polder" (loan-word trots)
 *   EN/DE/FR/IT/ES = "Dusk" (universeel verstaanbaar)
 */

.theme-dark {
  /* ─────────── CANVAS ─────────── */
  --bg: #1a2420;              /* deep polder-green */
  --bg-pop: #202b26;          /* elevated time-rails */
  --card: #26322c;
  --card-elevated: #2b3831;   /* defensive-UI card (Personal ID 5G.17) */

  /* ─────────── INK (text) ─────────── */
  /* Alpha-based op donkere polder-green voor WCAG AA contrast */
  --ink: rgba(242, 245, 235, 0.96);
  --ink-secondary: rgba(242, 245, 235, 0.74);
  --ink-tertiary: rgba(242, 245, 235, 0.52);

  /* ─────────── INK ON CHROME (contrast-persistent) ─────────── */
  /* Zelfde waardes als light — tekst op topbar/hero/skyline blijft wit. */
  --ink-on-chrome: #ffffff;
  --ink-on-chrome-soft: rgba(255, 245, 230, 0.82);
  --ink-on-chrome-faint: rgba(255, 245, 230, 0.65);

  /* ─────────── SKY (dusk-tinted voor cohesie met polder-green body) ─────────── */
  /* Donkere dusk-tinten zodat topbar/skyline niet felblauw bovenop
     polder-green body liggen. Gaat gradueel over naar near-black bij body. */
  --sky-top: #3a5d80;         /* mid dusk-blue */
  --sky-mid: #28435f;         /* deeper dusk-blue */
  --sky-bot: var(--topbar-bg); /* near-black polder */

  /* ─────────── LINES ─────────── */
  --line: rgba(220, 240, 215, 0.08);
  --line-strong: rgba(220, 240, 215, 0.14);

  /* ─────────── ACCENT (warmer op donker) ─────────── */
  /* Micro-detail register 3.9: primary-button-tekst op dark = --bg zelf
   * ("knoppen dragen een stukje van de polder in zich") */
  --accent: #e58b5a;          /* was #c7572b in light */
  --accent-ink: #ffa775;
  --accent-soft: rgba(229, 139, 90, 0.14);

  /* ─────────── CREAM (polder-moss) ─────────── */
  --cream: #2d3a32;
  --cream-strong: rgba(220, 240, 215, 0.14);

  /* ─────────── 5 SEMANTIC ROLLEN (verschoven voor contrast) ─────────── */
  --ok: #8fd4a8;    --ok-soft: rgba(143, 212, 168, 0.15);   --ok-ink: #b4e5c6;
  --warn: #e3bc5a;  --warn-soft: rgba(227, 188, 90, 0.14);  --warn-ink: #efd087;
  --err: #e68787;   --err-soft: rgba(230, 135, 135, 0.14);  --err-ink: #f0a6a6;
  --info: #87b8e8;  --info-soft: rgba(135, 184, 232, 0.14); --info-ink: #a9ccee;

  /* ─────────── CHROME ─────────── */
  --topbar-bg: #122018;       /* near-black polder bij dusk */
  --topbar-ink: rgba(242, 245, 235, 0.92);

  /* ─────────── SHADOWS (dark — pure zwart voor lift op polder-green) ─────────── */
  --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --sh-md: 0 2px 8px rgba(0, 0, 0, 0.35);
  --sh-lg: 0 8px 20px rgba(0, 0, 0, 0.4);
  --sh-xl: 0 12px 32px rgba(0, 0, 0, 0.5);
  --sh-sheet: 0 -8px 24px rgba(0, 0, 0, 0.4);

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

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