/* tokens.css — generated from docs/STYLE.md (D-110, D-119).
 * Source of truth is STYLE.md; change that document, then regenerate this file.
 * Light theme only. Plain CSS custom properties, no build step. */

/* ---- Typefaces (STYLE.md §2) --------------------------------------------
 * Montserrat self-hosted: exactly two woff2 files, font-display: swap.
 * DIN OT stays print-only (unlicensed for the app). */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/Montserrat-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/Montserrat-SemiBold.woff2") format("woff2");
}

:root {
  /* ---- Color: brand (STYLE.md §1) -------------------------------------- */
  /* The only interactive color: links, primary buttons, active nav, focus. */
  --kleur-primair: #2A57AB;
  /* Headings, table header text. */
  --kleur-kop: #1D3056;
  /* Selection/hover tint, active-row background. */
  --kleur-selectie: #EAF0F9;
  /* Tint borders. */
  --kleur-selectie-rand: #B4C4E1;
  /* Identity, never error: dotted-line motif, editie marker — sparing.
   * Never as reading text on white (contrast borderline). */
  --kleur-merk-rood: #ED1C24;

  /* ---- Color: neutrals -------------------------------------------------- */
  --tekst: #1F2733;
  --tekst-gedempt: #5B6474;
  --rand: #D6DAE1;
  --rand-invoer: #C4CBD6;
  --vlak: #F4F6FA;
  --wit: #FFFFFF;

  /* ---- Color: semantics & coverage (rooster/signalen family) ------------
   * Semantic red is deliberately calmer than merk-rood. All pairs AA-checked
   * on their fills and on white (D-092). */
  --sein-groen-vlak: #EAF3DE;
  --sein-groen-tekst: #27500A;
  --sein-amber-vlak: #FAEEDA;
  --sein-amber-tekst: #633806;
  --sein-rood-vlak: #FCEBEB;
  --sein-rood-tekst: #791F1F;
  /* Blauw = vol maar iets staat nog op concept (W-101 blok C, D-232(5)):
   * bemenst, maar nog niet iedereen weet het. Zit tussen amber en groen in.
   * Contrast #DEEAF8/#173A6B = 9.29:1 (WCAG-formule), zelfde familie als de
   * andere drie paren. */
  --sein-blauw-vlak: #DEEAF8;
  --sein-blauw-tekst: #173A6B;
  /* Signal lines, danger text, destructive buttons. */
  --signaalrood: #A32D2D;

  /* ---- Typography (STYLE.md §2) ----------------------------------------
   * Scale: 12 / 13 / 14 / 16 / 20 / 24. Nothing below 12px. */
  --font-kop: "Montserrat", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-basis: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --maat-12: 12px;
  --maat-13: 13px;
  --maat-14: 14px;
  --maat-16: 16px;
  --maat-20: 20px;
  --maat-24: 24px;
  --regelhoogte-basis: 1.5;  /* body 14px */
  --regelhoogte-dicht: 1.4;  /* tables & dense UI 13px */
  --letterafstand-merk: 3px; /* merk-regel: letter-spaced caps 12px */

  /* ---- Spacing & density (STYLE.md §3, D-112 laptop-first) -------------- */
  --ruimte-4: 4px;
  --ruimte-8: 8px;
  --ruimte-12: 12px;
  --ruimte-16: 16px;
  --ruimte-24: 24px;
  --celvulling: 6px 8px;        /* table cells */
  --knopvulling: 7px 14px;      /* buttons */
  --invoervulling: 6px 10px;    /* inputs */
  --aanraakdoel: 40px;          /* min touch target on coarse pointers (D-092) */
  --inhoud-max: 1200px;         /* line-length ceiling, not a layout width */

  /* ---- Radius ----------------------------------------------------------- */
  --radius-knop: 6px;   /* controls */
  --radius-kaart: 12px; /* cards/panels */
  --radius-pil: 99px;   /* badges */

  /* ---- Focus ring (the only shadow) -------------------------------------
   * §1: focus ring is interactive → primair outline; §3: shadow is
   * 0 0 0 3px selectie-tint. Combined: primair outline + selectie halo. */
  --focusring: 0 0 0 3px var(--kleur-selectie);
}