/* ============================================================================
   SYNDLE Audit — design tokens
   Overgenomen uit het prototype (Syndle Audit · Prototype.html, "Warm Linnen").
   Het spectrum en de inkt komen uit de SYNDLE-huisstijl; laad dit als eerste
   stylesheet en verwijs overal naar var(--token) in plaats van vaste waarden.

   Let op: dit is de huisstijl van de APP (het gereedschap). De huisstijl van een
   ziekenhuis leeft in het rapport, niet hier — zie huisstijlen/ en CLAUDE.md.
   ========================================================================== */

:root {
  /* --- Spectrum (logo, accenten, categoriekleuren) --------------------- */
  --sp-red: #E52528;
  --sp-orange: #EB5B26;
  --sp-amber: #F08222;
  --sp-gold: #F7A41F;
  --sp-yellow: #FECA0A;
  --sp-citrus: #FAEA25;
  /* Wit op #EB5B26 haalt 3,5:1. Voor knoppen en andere vlakken met witte tekst
     gebruiken we de diepere variant (5,0:1); het spectrum-oranje blijft voor
     randen, accenten en het logo. */
  --sp-orange-diep: #C2470D;
  --spectrum: linear-gradient(90deg, #E52528 0%, #EB5B26 22%, #F08222 44%,
                              #F7A41F 64%, #FECA0A 84%, #FAEA25 100%);

  /* --- Inkt en vlakken -------------------------------------------------- */
  --ink: #241c16;
  --ink-soft: #4d4239;
  /* Was #8a7d70; dat haalde op linnen 3,6:1 en dus niet de 4,5:1 die tekst nodig
     heeft. Deze doet 5,4:1 op linnen en 6,0:1 op wit. */
  --ink-mute: #6f6154;
  --line: #e9e0d6;
  --line-soft: #f1ebe2;
  --surface: #ffffff;
  --linen: #f8f3ec;
  --linen-deep: #f1e9dd;

  /* --- Oordeel en cijfers ---------------------------------------------- */
  --goed: #2f7d4f;   /* cijfer >= 8, 'goed'          */
  --matig: #C98A1A;  /* cijfer 6 t/m 8, aandachtspunt */
  --zwak: #C0392B;   /* cijfer < 6, afwijking         */

  /* --- Vorm ------------------------------------------------------------- */
  --r-lg: 18px;
  --r-md: 12px;
  --r-sm: 8px;
  --schaduw-kaart: 0 1px 2px rgba(60, 40, 20, .05), 0 6px 22px rgba(60, 40, 20, .06);
  --schaduw-pop: 0 16px 48px rgba(60, 40, 20, .18);

  /* --- Typografie ------------------------------------------------------- */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-ui: "Hanken Grotesk", system-ui, sans-serif;
  --font-mono: "Spline Sans Mono", ui-monospace, monospace;

  /* --- Maten van de app-schil ------------------------------------------ */
  /* 60px en een witte balk, zoals de TopBar in het prototype. */
  --topbar-hoogte: 60px;
  --inhoud-max: 1200px;
  --inhoud-pad: 26px;
}