/* ============================================================
   SalderingsDienst — Centrale design tokens
   Single source of truth. Geünificeerd op het design system
   (readme.md / SKILL.md / tokens/): institutioneel navy #1a4571,
   goud uitsluitend als klein accent, warm-papier neutralen,
   PT Serif voor koppen, Source Sans 3 voor lopende tekst en UI,
   Cousine alleen voor referentie-achtige regels.
   ============================================================ */
:root {
  /* --- Merk: navy (autoriteit, vertrouwen) --- */
  --navy-900: #0e2236;   /* footer, diepste veld */
  --navy-800: #102a44;
  --navy-700: #13304c;
  --navy-600: #14324f;   /* donkere secties, hero-basis */
  --navy-500: #16395a;
  --navy-400: #1a4571;   /* PRIMAIR merk-navy: knoppen, links, accenten */
  --navy-300: #163c63;   /* hover op primair */

  /* --- Merk: goud (warmte; uitsluitend spaarzaam) --- */
  --gold-500: #b98a3e;   /* eyebrow-labels en accenten op licht */
  --gold-400: #cdb98e;   /* kaart-hoverrand */
  --gold-300: #e7c98a;   /* accent/eyebrow op navy, energiepulsen, laadniveau */

  /* --- Neutralen: warm papier --- */
  --paper:   #faf8f4;    /* pagina-achtergrond */
  --paper-2: #fcfbf8;    /* inzetpaneel */
  --paper-3: #f7f5f0;    /* rustige vulling */
  --line:    #ece7dc;    /* haarlijn op papier */
  --line-2:  #e6e0d4;    /* kaartrand */
  --field:   #d9d3c6;    /* invoerveldrand */

  /* --- Inkt (warm houtskool, geen zuiver zwart) --- */
  --ink-900: #16263a;    /* displaykoppen */
  --ink-800: #1a2733;    /* sterke lopende tekst, nav */
  --ink-700: #1c2733;    /* standaardtekst */
  --ink-600: #52606c;    /* secundaire tekst */
  --ink-500: #5c6670;    /* gedempte lopende tekst */
  --ink-400: #6b7682;    /* bijschriften */
  --ink-300: #9aa0a6;    /* placeholder */

  /* --- Tekst op navy --- */
  --on-navy-100: #ffffff;
  --on-navy-80:  #cdd8e4;
  --on-navy-60:  #b7c4d2;
  --on-navy-40:  #9fb0c2;
  --on-navy-30:  #6b7e92;

  /* --- Semantisch --- */
  --success-bg: #eaf3ec;
  --success-fg: #1f7a44;
  --warn-bg:    #fdf3e0;
  --warn-line:  #f0dcae;
  --warn-fg:    #7a5a18;

  /* --- Typografie --- */
  --font-serif: 'PT Serif', Georgia, 'Times New Roman', serif;
  --font-sans:  'Source Sans 3', -apple-system, system-ui, sans-serif;
  --font-mono:  'Cousine', 'Courier New', monospace;

  --fs-display: clamp(40px, 3.2vw + 28px, 64px);  /* hero-H1 */
  --fs-h2:      clamp(28px, 2vw + 20px, 42px);     /* sectiekoppen */
  --fs-h3:      20px;
  --fs-lead:    clamp(17px, .4vw + 15.5px, 18.5px);
  --fs-body:    16px;
  --fs-body-sm: 15.5px;
  --fs-small:   14px;
  --fs-eyebrow: 14px;
  --fs-caption: 13px;

  --lh-tight:   1.08;
  --lh-heading: 1.15;
  --lh-body:    1.6;

  --ls-display: -0.5px;
  --ls-eyebrow: 1.5px;

  /* --- Ritme & layout --- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 22px; --space-6: 28px; --space-7: 38px; --space-8: 56px;
  --space-9: 90px;                     /* sectie-verticaal op desktop */
  --pad-section: clamp(56px, 5vw + 32px, 90px);
  --container: 1180px;
  --container-narrow: 820px;
  --gutter: 20px;

  /* --- Vorm --- */
  --radius-sm:  7px;    /* knoppen, invoervelden */
  --radius-md:  10px;   /* chips, kleine panelen */
  --radius-lg:  14px;   /* kaarten */
  --radius-xl:  18px;   /* featurepanelen, foto's */
  --radius-pill: 100px;

  /* --- Diepte (navy-getint, ingehouden) --- */
  --shadow-xs:  0 1px 2px rgba(20,50,79,.25);
  --shadow-sm:  0 3px 10px rgba(26,69,113,.30);
  --shadow-md:  0 14px 34px rgba(8,22,38,.30);
  --shadow-lg:  0 24px 60px rgba(20,50,79,.10);
  --shadow-hero: 0 30px 60px rgba(8,22,38,.45);

  /* --- Beweging --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: .15s ease;

  /* --- Verlopen --- */
  --grad-navy: linear-gradient(170deg, var(--navy-600) 0%, var(--navy-900) 100%);
}