/* ============================================================
   VKRNL - css/variables.css
   Alle kleuren, maten en typografie op één plek.
   ============================================================ */

:root {
  /* --- Merkkleuren --------------------------------------- */
  --blauw-900: #0b2545;
  --blauw-800: #12345c;
  --blauw-700: #17457a;
  --blauw-600: #1a5fb4;
  --blauw-500: #1f6feb;   /* accentkleur */
  --blauw-400: #4d90f0;
  --blauw-100: #dceafc;
  --blauw-50:  #eff5fe;

  /* --- Zijbalk (donker) ---------------------------------- */
  --zijbalk-bg:        #101c2e;
  --zijbalk-bg-diep:   #0a1421;
  --zijbalk-tekst:     #c7d3e3;
  --zijbalk-tekst-fel: #ffffff;
  --zijbalk-hover:     #1b2c45;
  --zijbalk-actief:    #1f6feb;
  --zijbalk-lijn:      #1e2f47;

  /* --- Inhoud (licht) ------------------------------------ */
  --achtergrond:   #f4f6f9;
  --vlak:          #ffffff;
  --vlak-zacht:    #f8fafc;
  --lijn:          #e2e8f0;
  --lijn-sterk:    #cbd5e1;

  /* --- Tekst --------------------------------------------- */
  --tekst:         #14212e;
  --tekst-zacht:   #5a6a7d;
  --tekst-licht:   #8a99ab;
  --tekst-omgekeerd: #ffffff;

  /* --- Statuskleuren ------------------------------------- */
  --groen:      #17864a;
  --groen-bg:   #e3f5eb;
  --oranje:     #b96b06;
  --oranje-bg:  #fdf0dc;
  --rood:       #c0342b;
  --rood-bg:    #fdeae8;
  --paars:      #6b3fa0;
  --paars-bg:   #f0eafa;
  --grijs:      #64748b;
  --grijs-bg:   #eef1f5;
  --turquoise:    #0f7a86;
  --turquoise-bg: #e0f4f6;

  /* --- Typografie ---------------------------------------- */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --font-cijfers: ui-monospace, "SF Mono", "Segoe UI Mono", "Roboto Mono",
                  Menlo, Consolas, monospace;

  --tekst-xs:  0.75rem;
  --tekst-sm:  0.8125rem;
  --tekst-md:  0.9375rem;
  --tekst-lg:  1.0625rem;
  --tekst-xl:  1.375rem;
  --tekst-2xl: 1.75rem;

  /* --- Ruimte -------------------------------------------- */
  --ruimte-1: 4px;
  --ruimte-2: 8px;
  --ruimte-3: 12px;
  --ruimte-4: 16px;
  --ruimte-5: 24px;
  --ruimte-6: 32px;
  --ruimte-7: 48px;

  /* --- Vorm ---------------------------------------------- */
  --rond-sm: 6px;
  --rond:    10px;
  --rond-lg: 14px;
  --rond-vol: 999px;

  --schaduw-sm: 0 1px 2px rgba(16, 28, 46, 0.06);
  --schaduw:    0 2px 8px rgba(16, 28, 46, 0.08);
  --schaduw-lg: 0 12px 32px rgba(16, 28, 46, 0.18);

  /* --- Maten --------------------------------------------- */
  /* Was 248px. De langste menutekst is "Communicatie" en die past
     ruim op 208; dat levert veertig pixels op voor de inhoud, en dat
     is precies waar de planning krap zat. */
  --zijbalk-breedte: 208px;
  --kopbalk-hoogte: 60px;
  --mobiele-balk-hoogte: 64px;
  --raak-hoogte: 48px;   /* minimale knophoogte op mobiel */
}