/* ============================================================
   THEME · TOKENS  (static/css/theme/tokens.css)
   ------------------------------------------------------------
   Eén plek voor alle ontwerpwaarden: lettertype, letterschaal,
   regelafstand, letterspatiëring, gewichten, ruimte, hoeken,
   schaduwen en kleuren. Wian, 25-09-2026: "op alle pagina's de
   text spacing checken en een uniforme typografie neerzetten en
   borgen in een centrale theme folder."

   Regels (geborgd door de test `typografie_alleen_via_theme_tokens`
   in crates/server/src/assets.rs):
   - Buiten deze map staat nergens een losse lettergrootte,
     regelafstand, letterspatiëring of lettertype: altijd via een
     token hieronder (`font-size: var(--text-14)`).
   - Nieuwe maat nodig? Voeg hier een token toe, met reden, i.p.v.
     een losse waarde in een pagina.

   Letterschaal: de naam is de maat in pixels bij de standaard
   16px-basis, de waarde staat in rem zodat de browserinstelling
   van de bezoeker meeschaalt. Onder de 16 in stapjes van 1 px,
   want daar leeft het meeste tekstwerk (labels, hints, tabellen).
   ============================================================ */
:root {
  /* ---- Lettertypen (bestanden in fonts.css) ---- */
  --font-sans: 'Hanken Grotesk', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-icons: 'Material Symbols Outlined';

  /* ---- Letterschaal ---- */
  --text-10: 0.625rem;  /* sectiekopjes in KAPITALEN, kleinste hint */
  --text-11: 0.6875rem; /* hints, statusregels, badges */
  --text-12: 0.75rem;   /* bijschriften, tabelkoppen */
  --text-13: 0.8125rem; /* kleine broodtekst, formulierhints */
  --text-14: 0.875rem;  /* secundaire broodtekst, knoppen, labels */
  --text-15: 0.9375rem; /* broodtekst in panelen en kaarten */
  --text-16: 1rem;      /* basis broodtekst */
  --text-18: 1.125rem;  /* inleiding, grote knoppen */
  --text-20: 1.25rem;   /* h4 / kaarttitel */
  --text-24: 1.5rem;    /* h3 */
  --text-28: 1.75rem;   /* h2 */
  --text-32: 2rem;      /* h1 op gewone pagina's */
  --text-36: 2.25rem;   /* h1 groot */
  --text-40: 2.5rem;    /* sectietitels landing */
  --text-48: 3rem;      /* held-titel mobiel/tablet */
  --text-56: 3.5rem;    /* held-titel desktop */

  /* ---- Regelafstand ---- */
  --leading-none: 1;       /* iconen, losse cijfers */
  --leading-tight: 1.2;    /* koppen */
  --leading-snug: 1.35;    /* kaarttitels, knoppen met twee regels */
  --leading-normal: 1.5;   /* UI-tekst */
  --leading-relaxed: 1.6;  /* broodtekst */
  --leading-loose: 1.8;    /* lange leesteksten (juridisch, over) */

  /* ---- Letterspatiëring ---- */
  --tracking-tighter: -0.03em; /* grote held-titels */
  --tracking-tight: -0.015em;  /* koppen */
  --tracking-normal: 0;
  --tracking-wide: 0.05em;     /* kleine kapitalen, labels */
  --tracking-wider: 0.1em;     /* sectiekopjes in kapitalen */
  --tracking-widest: 0.15em;   /* eyebrow-tekst */

  /* ---- Gewichten ---- */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---- Ruimte ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ---- Hoeken ---- */
  --radius-sm: 0.125rem;
  --radius-md: 0.25rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-full: 9999px;

  /* ---- Schaduwen ---- */
  --shadow-sm: 0 1px 3px rgba(66, 75, 46, 0.06);
  --shadow-md: 0 4px 12px rgba(66, 75, 46, 0.08);
  --shadow-lg: 0 8px 24px rgba(66, 75, 46, 0.12);
  --shadow-glass: 0 4px 20px -2px rgba(66, 75, 46, 0.08);

  /* ---- Kleuren (Material-achtig palet, olijf + terracotta) ---- */
  --color-primary: #424b2e;
  --color-on-primary: #ffffff;
  --color-primary-container: #5a6344;
  --color-on-primary-container: #d5dfb8;
  --color-primary-fixed: #dde7c0;
  --color-primary-fixed-dim: #c1cba5;

  --color-secondary: #98462f;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #fd9579;

  --color-tertiary: #424b34;
  --color-tertiary-container: #59634b;
  --color-on-tertiary-container: #d4dfc0;

  --color-bg: #fef9f0;
  --color-on-background: #1d1c16;

  --color-surface: #fef9f0;
  --color-surface-container: #f2ede4;
  --color-surface-container-high: #ece8df;
  --color-surface-container-highest: #e7e2d9;
  --color-surface-container-low: #f8f3ea;
  --color-surface-container-lowest: #ffffff;
  --color-surface-dim: #ded9d1;
  --color-surface-variant: #e7e2d9;

  --color-on-surface: #1d1c16;
  --color-on-surface-variant: #46483f;

  --color-outline: #77786e;
  --color-outline-variant: #c7c7bb;

  --color-error: #ba1a1a;
  --color-on-error: #ffffff;
  --color-error-container: #ffdad6;

  --color-model: #888888;
  --color-border: #c7c7bb;

  /* ---- Lay-out ---- */
  --top-bar-h: 80px;
}