/* Design tokens – afgeleid van de menubalk (de visuele bron van waarheid) en STIJLRICHTLIJN.md.
   Elke sectie gebruikt alleen deze waarden; geen losse kleuren, maten of tijden. */
:root {
  /* ---- Kleur: alleen merkkleuren + vaste transparante varianten ---- */
  --sc-lime: #dde536;
  --sc-blue: #4072b1;
  --sc-ink: #323232;
  --sc-white: #ffffff;
  --sc-fade: linear-gradient(180deg, #4170B1 0%, #5F8293 25%, #79976F 50%, #97AD56 75%, #B6BE38 100%);

  --sc-blue-soft: rgba(64, 114, 177, .08);   /* hover-vlak, zoals in het menu */
  --sc-ink-muted: rgba(50, 50, 50, .72);     /* lopende tekst op licht */
  --sc-line: rgba(50, 50, 50, .12);          /* haarlijn, zoals de menubalk */
  --sc-on-dark-muted: rgba(255, 255, 255, .82);
  --sc-on-dark-line: rgba(255, 255, 255, .28);

  /* Glas (menubalk boven de hero + glazen kaart) */
  --sc-glass-bg: linear-gradient(135deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .06));
  --sc-glass-border: rgba(255, 255, 255, .35);
  --sc-glass-blur: blur(16px) saturate(1.2);

  /* Merkfade-dosering: 23% op donker (hero, panelen), 8% als wassing op licht */
  --sc-fade-dark: .23;
  --sc-wash: rgba(255, 255, 255, .92);

  /* ---- Typografie: Jost, vloeiende schaal ---- */
  --sc-font: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sc-fs-small: .875rem;
  --sc-fs-body: 1rem;
  --sc-fs-lead: 1.125rem;
  --sc-fs-h3: clamp(1.125rem, 1.05rem + .35vw, 1.375rem);
  --sc-fs-h2: clamp(2rem, 1.45rem + 2.2vw, 3rem);
  --sc-fs-stat: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  --sc-lh-tight: 1.08;
  --sc-lh-snug: 1.25;
  --sc-lh-body: 1.6;
  --sc-tracking-tight: -0.025em;

  /* ---- Ruimte: 4-puntsschaal + één sectieritme ---- */
  --sc-space-1: 4px;
  --sc-space-2: 8px;
  --sc-space-3: 12px;
  --sc-space-4: 16px;
  --sc-space-5: 24px;
  --sc-space-6: 32px;
  --sc-space-7: 48px;
  --sc-space-8: 64px;
  --sc-section-y: clamp(64px, 8vw, 112px);   /* afstand tussen álle secties */

  /* ---- Breedtes ---- */
  --sc-container: 1280px;
  --sc-gutter: 16px;                          /* zelfde rand als de zwevende menubalk */
  --sc-measure: 52ch;                         /* maximale regellengte lopende tekst */

  /* ---- Vormen ---- */
  --sc-radius-sm: 10px;
  --sc-radius-lg: 20px;                       /* = menubalk; alle kaarten, panelen en beeld */
  --sc-radius-xl: 36px;                       /* hero die tijdens scrollen een kaart wordt */
  --sc-radius-pill: 999px;

  /* ---- Schaduw: drie niveaus ---- */
  --sc-shadow-1: 0 10px 30px rgba(50, 50, 50, .10);  /* menubalk in rust, kaarten in rust */
  --sc-shadow-2: 0 18px 44px rgba(50, 50, 50, .14);  /* uitklapmenu, kaart bij hover */
  --sc-shadow-3: 0 20px 40px rgba(0, 0, 0, .25);     /* glas en donkere panelen */

  /* ---- Beweging ---- */
  --sc-dur-fast: 150ms;    /* hover/focus-feedback */
  --sc-dur-base: 200ms;    /* openen/sluiten */
  --sc-dur-slow: 300ms;    /* toestandswissel menubalk */
  --sc-ease: ease;
  --sc-ease-out: cubic-bezier(.16, 1, .3, 1);   /* rustig uitlopend: alle onthullingen */
  --sc-dur-reveal: 900ms;  /* elementen die in beeld komen */
  --sc-reveal-y: 28px;     /* afstand waarover ze omhoog komen */
  --sc-stagger: 90ms;      /* vertraging tussen elementen in een groep */
  --sc-lift-sm: -1px;      /* knoppen */
  --sc-lift: -2px;         /* klikbare kaarten */

  /* ---- Focus ---- */
  --sc-focus: var(--sc-blue);
}

/* Op donker wordt de focusring wit, zodat hij altijd zichtbaar is */
.on-dark { --sc-focus: var(--sc-white); }

@media (prefers-reduced-motion: reduce) {
  :root { --sc-lift-sm: 0px; --sc-lift: 0px; --sc-reveal-y: 0px; --sc-dur-reveal: 0ms; --sc-stagger: 0ms; }
}