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

:root {
  /* Samsung Internet en Chrome op Android hebben een stand waarin ze
     elke website automatisch donker maken. Dat vervangt onze witte
     vlakken door donkergrijs en onze donkere tekst door wit, met een
     onleesbaar en half omgekeerd scherm als gevolg - precies wat op
     een Samsung te zien was. Met deze regel zegt de app: ik ben een
     licht ontwerp, laat het zoals het is. */
  color-scheme: light;

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