/* Design tokens — De Oranje Schaar
   [2026-07-21] MODERNE RICHTING (besluit Nazif: "moderner, zoals een Apple-site").
   Vervangt de eerdere crème/serif-boutique-tokens: die lazen als vintage.
   Kern: crisp wit + near-black, één moderne sans (Inter) op grote schaal met negatieve tracking,
   royale witruimte, grote afbeeldingen met ronding, oranje als enige scherpe merkaccent. */
:root {
  /* Palet — clean & modern */
  --color-bg: #FFFFFF;            /* crisp wit, basis */
  --color-bg-alt: #F4F4F2;        /* zachte neutrale sectie (Apple-achtig #f5f5f7, iets warmer) */
  --color-bg-rgb: 255, 255, 255;
  --color-dark: #17171A;          /* near-black voor full-bleed donkere secties */
  --color-dark-rgb: 23, 23, 26;
  --color-text: #1D1B19;          /* near-black met minieme warmte */
  --color-text-soft: rgba(29, 27, 25, 0.62);
  --color-text-on-dark: #FFFFFF;
  --color-text-on-dark-soft: rgba(255, 255, 255, 0.66);
  --color-accent: #F5821F;        /* merk-oranje — vlak/pill/icoon, of tekst op donker. Nooit tekst op wit. */
  --color-accent-rgb: 245, 130, 31;
  --color-accent-hover: #E0741A;

  --color-border: rgba(29, 27, 25, 0.10);
  --color-border-on-dark: rgba(255, 255, 255, 0.16);

  /* Typografie — één moderne sans, groot en strak */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-serif: var(--font-sans); /* legacy-alias: oude pagina's blijven bouwen, maar zien er modern uit */

  --fs-display: clamp(2.6rem, 1.4rem + 5vw, 4.9rem);
  --fs-h1: clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
  --fs-h2: clamp(1.6rem, 1.25rem + 1.6vw, 2.5rem);
  --fs-h3: clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem);
  --fs-lead: clamp(1.1rem, 1.02rem + 0.45vw, 1.4rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9rem;
  --fs-label: 0.8rem;

  --lh-display: 1.04;
  --lh-heading: 1.1;
  --lh-body: 1.6;

  --ls-display: -0.028em;   /* negatieve tracking = het moderne signaal */
  --ls-heading: -0.02em;
  --label-tracking: 0.02em;

  /* Ruimte — royaal */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4.5rem;
  --space-6: 7.5rem;

  --container-w: 1240px;
  --radius: 12px;
  --radius-lg: 24px;
  --radius-pill: 980px;

  --shadow-soft: 0 18px 50px -20px rgba(29, 27, 25, 0.28);
  --shadow-card: 0 2px 10px rgba(29, 27, 25, 0.06);

  --ease-atelier: cubic-bezier(0.22, 0.61, 0.22, 1);
}