/*
 * BrightWP — designtokens.
 * Exact overgenomen uit reference/design-export/Designsysteem.dc.html
 * (voorgestelde identiteit; wijzig hier centraal, niet per component).
 */
:root {
  /* Kleur */
  --bw-night:        #0A1B3D; /* nachtblauw — vlakken, koppen */
  --bw-night-deep:   #061229; /* footer */
  --bw-blue:         #1B5CFF; /* helder blauw — acties, links */
  --bw-blue-hover:   #0B45D9;
  --bw-lime:         #C2F14E; /* accent — nooit als tekst op wit */
  --bw-cream:        #FBF8F3; /* warm wit — achtergrond */
  --bw-line:         #E6E1D7; /* randen */
  --bw-text:         #16233F; /* body */
  --bw-text-soft:    #5C6B85; /* bijschrift */
  --bw-text-intro:   #44526E; /* introtekst */
  --bw-text-mid:     #2A3A5A;
  --bw-white:        #FFFFFF;

  /* Signaalkleuren (vlak / tekst) */
  --bw-success-bg:   #F2FADF;  --bw-success-fg:  #3D6B00;
  --bw-warn-bg:      #FFF3D6;  --bw-warn-fg:     #8A5A00;
  --bw-error-bg:     #FFF4F0;  --bw-error-fg:    #8A2B00;
  --bw-info-bg:      #F2F6FF;  --bw-info-fg:     #0A3E8A;

  /* Velden */
  --bw-field-border: #D5CFC3;
  --bw-error-border: #C0502A;

  /* Typografie */
  --bw-font-head: "Bricolage Grotesque", sans-serif;
  --bw-font-body: "Instrument Sans", system-ui, sans-serif;

  /* Radius */
  --bw-radius-field: 11px;   /* velden en knoppen 10–12 */
  --bw-radius-card:  16px;   /* kaarten 14–18 */
  --bw-radius-lg:    21px;   /* grote vlakken 20–22 */
  --bw-radius-pill:  999px;

  /* Layout */
  --bw-container:      1220px;
  --bw-container-app:  1320px; /* klantomgeving */
  --bw-gutter:         20px;

  /* Schaduw */
  --bw-shadow-btn:   0 10px 24px rgba(27, 92, 255, .3);
  --bw-shadow-card:  0 18px 44px rgba(10, 27, 61, .14);
  --bw-shadow-hero:  0 20px 46px rgba(10, 27, 61, .2);
}