/* =============================================
   EMVANE — Kleur- en vormtokens
   Richting: Slash + E (recht), tint Indigo.
   Licht is standaard; donker volgt het systeem,
   tenzij <html data-theme="light|dark"> anders zegt.
   Alle tekstkleuren halen WCAG AA (≥ 4,5:1), zie MERK.md.
   ============================================= */

:root {
  /* Kleur — licht */
  --bg:          #FFFFFF;  /* pagina */
  --surface:     #F5F5F9;  /* kaarten, vlakken */
  --line:        #E3E3EA;  /* randen, scheidingslijnen */
  --ink:         #0F1020;  /* koppen, logo */
  --text:        #2A2B3A;  /* lopende tekst */
  --muted:       #5D5F70;  /* tweede tekst, labels */
  --accent:      #4B45A8;  /* knoppen, links, middelste balk van de E */
  --accent-hover:#3B3592;
  --on-accent:   #FFFFFF;  /* tekst op --accent */
  --accent-text: #4B45A8;  /* accent als tekstkleur */
  --accent-soft: #ECEBF8;  /* labels, zachte accentvlakken */
  --danger:      #B42318;  /* alleen formulierfouten, altijd met tekst */
  --success:     #3D7A55;  /* alleen bevestigingen, altijd met tekst */
  --focus:       #4B45A8;  /* focusring, 2px + 2px afstand */

  /* Letters */
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --weight-text: 400;
  --weight-medium: 500;
  --weight-head: 540;   /* koppen: iets dunner en rustiger (3 nov 2026) */
  --tracking-display: -0.05em;   /* grote koppen (≥ 48px) */
  --tracking-head: -0.03em;      /* kleinere koppen */
  --tracking-label: 0.08em;      /* mono-labels in hoofdletters */

  /* Vorm */
  --radius-sm: 6px;   /* labels, tags */
  --radius:    8px;   /* knoppen, velden, kaarten */
  --radius-lg: 12px;  /* grote panelen, mockups */
  --border: 1px solid var(--line);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #0E0F17;
    --surface:     #171826;
    --line:        #272938;
    --ink:         #F3F3F8;
    --text:        #D4D5DE;
    --muted:       #9A9CAE;
    --accent:      #9C97F0;
    --accent-hover:#B4B0F5;
    --on-accent:   #0E0F17;
    --accent-text: #ADA9F5;
    --accent-soft: #23234A;
    --danger:      #FF8A80;
    --success:     #7FD1A0;
    --focus:       #9C97F0;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg:          #0E0F17;
  --surface:     #171826;
  --line:        #272938;
  --ink:         #F3F3F8;
  --text:        #D4D5DE;
  --muted:       #9A9CAE;
  --accent:      #9C97F0;
  --accent-hover:#B4B0F5;
  --on-accent:   #0E0F17;
  --accent-text: #ADA9F5;
  --accent-soft: #23234A;
  --danger:      #FF8A80;
  --success:     #7FD1A0;
  --focus:       #9C97F0;
  color-scheme: dark;
}