/*
 * Design tokens van DG Mestonderzoek.
 * Bron: design system "DG Mestonderzoek" (project/tokens.json, versie 1, 2026-10-01).
 * Waarden niet hier aanpassen zonder het design system mee te nemen.
 */
:root {
  /* Kleur: teal-palet */
  --teal-900: #244848; /* koppen op licht */
  --teal-800: #275557; /* knoppen */
  --teal-700: #366; /* kenmerkende vlakken (header, logo-tegel) */
  --teal-600: #127a7a; /* accenttekst en links op licht (4,8:1 op teal-50) */
  --teal-400: #4bc8c8; /* call-to-action vulling, nooit tekst op licht */
  --teal-200: #acdedd;
  --teal-50:  #eff9f9; /* paginaachtergrond */
  --white:    #fff;
  --ink:        #333; /* lopende tekst */
  --ink-strong: #0a0915;
  --grey-600:   #5c5b5b;

  /* Velden en lijnen */
  --field-border: #86898e; /* 3,5:1 op wit */
  --field-text:   #606266;
  --divider:      #dadbdd; /* alleen decoratieve lijnen */
  --focus-ring:   var(--teal-900);
  --glass:        #ffffff1a; /* doorzichtige vulling van de ghost-knop op donker teal */
  --glass-border: rgb(255 255 255 / 20%);

  /* Status (portal): altijd een woord plus een vorm, nooit alleen kleur */
  --success-700: #1e7a4a;
  --success-50:  #e3f4ea;
  --warning-700: #8a5a00;
  --warning-50:  #fdf1dc;
  --danger-700:  #b3261e;
  --danger-50:   #fbe9e7;

  /* Typografie */
  --font-sans: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Ruimte (WordPress-presets) */
  --space-10: 10px;
  --space-20: 20px;
  --space-30: 30px;
  --space-50: clamp(30px, 5vw, 50px);
  --space-70: clamp(30px, 7vw, 70px);

  /* Vorm: één huisstraal van 15px, vlak (geen schaduwen) */
  --radius-sm:    4px;
  --radius-field: 7px;
  --radius-md:    15px;
  --radius-pill:  9999px;
  --border-hairline: 1px;
  --border-strong:   2px;
}