/* GKM design tokens. Bron: gkm-admin/brand/GKM_Design_System.md + besluiten Gilton (5 okt 2026). */
:root {
  /* Kleur */
  --black: #000;
  --dark: #191919;
  --dark-2: #111;
  --yellow: #FCB202;
  --white: #fff;
  --text: #f0f0f0;        /* lopende tekst op zwart */
  --text-2: #e2e2e2;      /* tekst in kaarten */
  --muted: #aaa;          /* alleen kleine meta-tekst */
  --line: rgba(255,255,255,.08);
  --line-2: rgba(255,255,255,.16);
  --glow: rgba(255,255,255,.055);
  --spotlight: rgba(252,178,2,.10);
  /* Tekst op geel is altijd wit en vet, zonder schaduw (Gilton). Geen kleine lopende tekst op geel. */
  --on-yellow: #fff;

  /* Type */
  --font: 'Poppins', system-ui, sans-serif;
  --fs-display: clamp(48px, 8vw, 120px);
  --fs-h1: clamp(44px, 6.2vw, 88px);
  --fs-h2: clamp(34px, 4.3vw, 58px);
  --fs-h3: clamp(20px, 1.6vw, 24px);
  --fs-lead: 18px;
  --fs-body: 16px;
  --fs-small: 14px;
  --lh-tight: 1.02;
  --lh-body: 1.65;
  --ls-tight: -.025em;

  /* Ruimte (4px-basis) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;  --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;  --s-10: 128px;
  --section: clamp(64px, 7vw, 100px);

  /* Layout */
  --container: 1160px;
  --gutter: 40px;
  --nav-pill: 1000px;

  /* Radius */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-2xl: 28px; --r-pill: 100px;

  /* Schaduw */
  --sh-btn: 0 12px 28px -10px rgba(252,178,2,.55);
  --sh-float: 0 30px 60px -20px rgba(0,0,0,.8);
  --sh-phone: 0 40px 80px -20px rgba(0,0,0,.8);

  /* Beweging */
  --ease: cubic-bezier(.16,1,.3,1);
  --t-fast: .25s;
  --t-med: .35s;
  --t-slow: .6s;
  --lift: translateY(-8px);
  --tilt-rest: perspective(1200px) rotateX(10deg) rotateY(-14deg) skewX(-1deg);
  --tilt-hover: perspective(1200px) rotateX(5deg) rotateY(-6deg);
  --marquee: 26s;
}

@media (max-width: 900px) {
  :root { --gutter: 20px; }
}