/* 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).
 *
 * De -1.0.0 in de bestandsnaam is onze vendorrevisie, niet die van Montserrat,
 * en hij staat er om één reden: statischeCacheWaarde() geeft een jaar aan elke
 * naam met een versie erin (W-243/W-246). Deze twee bestanden worden hiervandaan
 * opgehaald en niet vanuit een template, dus de gehashte URL's van layout.Assets
 * bereiken ze niet — de naam is hun enige weg naar `immutable`. Vervang je een
 * font, hoog dan het nummer op, hier en in de bestandsnaam. Doe je dat niet, dan
 * houdt elke browser die het oude font heeft dat een jaar vast. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/Montserrat-Medium-1.0.0.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/Montserrat-SemiBold-1.0.0.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;
  /* Rand voor een pil die op --sein-blauw-vlak staat (W-351). De familie had
   * alleen vlak+tekst, want de andere drie worden als cel gebruikt en niet als
   * pil; een pil heeft wel een rand. Donkerder dan --kleur-selectie-rand zodat
   * de gekozen bereikpil ook aan zijn omtrek te herkennen is en niet alleen
   * aan zijn vulling. */
  --sein-blauw-rand: #8FB0DC;
  /* Signal lines, danger text, destructive buttons. */
  --signaalrood: #A32D2D;

  /* ---- Color: kaartspelden (W-369) --------------------------------------
   * De kleurcodering van de routekaart. Deze acht waarden zijn NIET van dit
   * project: ze zijn overgenomen uit de publieke kaart, teken voor teken, zodat
   * een speld op /locaties?weergave=kaart dezelfde kleur draagt als dezelfde
   * plek in de PWA en in het beheerpaneel. Dezelfde mapping staat daar:
   *
   *   PWA_Toneelroute/src/utils/iconUtils.ts        (typeColors)
   *   PWA_Toneelroute/src/utils/colorUtils.ts       (typeColors)
   *   Backend Toneelroute Kaart/index.php           (typeColors, ~r.455)
   *
   * Dit bestand heet gegenereerd uit docs/STYLE.md (D-110/D-119), en dat
   * geldt ook hier: de tabel plus de reden staat in STYLE.md §1 onder
   * "Kaartcategorieën", inclusief de vastgelegde afwijking op contrast.
   * Verander een waarde daar, niet alleen hier — en dan ook op de drie
   * plekken hierboven, want niets dwingt dat af.
   *
   * Wie hier een kleur wijzigt, wijzigt hem op alle vier de plekken of op geen
   * enkele — twee kaarten die uiteenlopen zijn erger dan twee kaarten die
   * allebei een lelijke kleur hebben. De categorie waar een kleur bij hoort
   * komt uit kaartAard (internal/handlers/geojson.go); onbekend is de terugval
   * en betekent op ONZE kaart "deze locatie heeft geen aard".
   *
   * Ze zijn met opzet NIET AA-gecontroleerd zoals de --sein-familie hierboven:
   * zie de contrastnotitie bij .kaart-speld in app.css. */
  --kaartkleur-ehbo: rgb(19, 145, 85);
  --kaartkleur-opening: rgb(237, 27, 35);
  --kaartkleur-binnen: rgb(46, 118, 92);
  --kaartkleur-buiten: rgb(0, 102, 179);
  --kaartkleur-mobiel: rgb(211, 42, 223);
  --kaartkleur-toilet: rgb(255, 204, 0);
  --kaartkleur-horeca: rgb(239, 107, 34);
  --kaartkleur-onbekend: rgb(128, 128, 128);

  /* ---- 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);
}