/* ============================================================
   DESIGN TOKENS — Ambtenaar.online prototype
   ------------------------------------------------------------
   Wijzig hier kleuren en lettertypes. Alle pagina's gebruiken
   deze variabelen, dus een aanpassing werkt overal door.
   ============================================================ */

:root {

  /* --- MERK KLEUREN ------------------------------------------
     Primair donker, accent en achtergrond.
     ---------------------------------------------------------- */
  --color-navy:           #0B1A36;   /* Donkerblauw (hero, dark sections) */
  --color-navy-deep:      #07122A;   /* Nog donkerder (footer)           */
  --color-accent:         #E85C1A;   /* Oranje accent (knoppen, links)   */
  --color-accent-hover:   #C94A10;
  --color-accent-soft:    #FBE7DC;   /* Zachte oranje achtergrond        */

  /* --- NEUTRALE KLEUREN -------------------------------------- */
  --color-cream:          #FAF7F0;   /* Crème pagina-achtergrond */
  --color-cream-deep:     #F3EEE2;   /* Iets donkerder crème     */
  --color-white:          #FFFFFF;
  --color-surface:        #FFFFFF;   /* Kaartjes                 */
  --color-surface-muted:  #F8FAFC;

  /* --- TEKST ------------------------------------------------- */
  --color-text:           #0F172A;   /* Hoofdtekst donker        */
  --color-text-muted:     #64748B;   /* Bijschrift, labels       */
  --color-text-inverse:   #FBFAF7;   /* Tekst op donkere achtergrond */
  --color-text-inverse-muted: #B5BED0;

  /* --- RANDEN & DIVIDERS ------------------------------------- */
  --color-border:         #E5E7EB;
  --color-border-dark:    rgba(255,255,255,0.12);

  /* --- LABELS / TAGS ----------------------------------------- */
  --color-label-new-bg:   #E85C1A;   /* "NIEUW" label            */
  --color-label-new-text: #FFFFFF;
  --color-label-hi-bg:    #0B1A36;   /* "UITGELICHT" label       */
  --color-label-hi-text:  #FFFFFF;

  /* ==========================================================
     TYPOGRAPHY
     ----------------------------------------------------------
     Serif font wordt gebruikt voor grote koppen (met italic
     accenten). Sans-serif voor alle UI en body-tekst.
     ========================================================== */

  --font-serif: 'Playfair Display', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:  ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type-schaal — pas aan voor grotere/kleinere typografie */
  --fs-xxs: 11px;
  --fs-xs:  12px;
  --fs-sm:  14px;
  --fs-md:  16px;
  --fs-lg:  18px;
  --fs-xl:  22px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;
  --fs-4xl: 52px;
  --fs-5xl: 68px;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  --ls-tight:  -0.02em;
  --ls-normal: 0;
  --ls-wide:   0.08em;
  --ls-xwide:  0.18em;

  /* ==========================================================
     SPACING / LAYOUT
     ========================================================== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  --container-max: 1200px;
  --container-pad: 24px;

  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 10px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 24px rgba(15, 23, 42, 0.08), 0 4px 8px rgba(15, 23, 42, 0.05);

  --transition: 160ms ease;
}

/* ------------------------------------------------------------
   DARK-SECTIE TOKENS — binnen .section-dark worden tekst- en
   achtergrondkleuren automatisch geïnverteerd.
   ------------------------------------------------------------ */
.section-dark {
  --color-text: var(--color-text-inverse);
  --color-text-muted: var(--color-text-inverse-muted);
  --color-surface: #122744;
  --color-border: var(--color-border-dark);
  background: var(--color-navy);
  color: var(--color-text-inverse);
}