/* Design tokens — zie design/TASTE.md voor de onderbouwing. */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,500;6..72,600&family=IBM+Plex+Sans:wght@400;500&display=swap');

:root {
  /* Kleur */
  --color-bg: #15120F;
  --color-bg-elevated: #1E1A16;
  --color-border: #2A241D;
  --color-heading: #F2EEE6;
  --color-text: #D9D4CC;
  --color-text-muted: #9C958A;
  --color-accent: #C9A876;
  --color-accent-foreground: #1A1512;
  --color-accent-hover: #D9BB8D;

  /* Typografie */
  --font-heading: "Newsreader", serif;
  --font-body: "IBM Plex Sans", sans-serif;

  /* Vorm */
  --radius-pill: 999px;
  --radius-md: 16px;
  --radius-sm: 8px;

  /* Layout */
  --gutter: clamp(32px, 8vw, 128px);
  --content-max-width: 1200px;

  /* Spacing-schaal */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-2xl: 96px;
  --space-3xl: 128px;

  /* Typografie-schaal */
  --text-eyebrow: 14px;
  --text-body: 17px;
  --text-lead: 20px;
  --heading-sm: clamp(28px, 3vw, 36px);
  --heading-md: clamp(40px, 5vw, 56px);
  --heading-lg: clamp(56px, 7vw, 88px);
  --heading-xl: clamp(72px, 9vw, 136px);
  --letter-spacing-tight: -0.02em;
  --letter-spacing-eyebrow: 0.08em;
  --line-height-heading: 1.05;
  --line-height-body: 1.6;

  /* Foto */
  --photo-size-lg: 280px;
  --photo-size-md: 220px;
  --photo-size-sm: 120px;
  --photo-size-xs: 72px;

  /* Leesbreedte (max-width voor tekstblokken) */
  --measure-xs: 440px;
  --measure-sm: 460px;
  --measure-md: 560px;
  --measure-lg: 620px;
  --measure-xl: 640px;
  --measure-2xl: 760px;

  /* Motion — scroll-reveal */
  --duration-reveal: 450ms;
  --ease-reveal: cubic-bezier(0.22, 1, 0.36, 1);
  --distance-reveal: 16px;
  --stagger-list: 70ms;
  --stagger-steps: 100ms;

  /* Motion — hover */
  --duration-hover: 140ms;
  --ease-hover: ease;

  /* Motion — ambient gloed */
  --duration-glow: 16s;
  --glow-size: 520px;
  --glow-blur: 60px;
  --glow-drift-x: 40px;
  --glow-drift-y: 30px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-reveal: 0ms;
    --distance-reveal: 0px;
    --stagger-list: 0ms;
    --stagger-steps: 0ms;
    /* --duration-hover blijft staan: kleurtransitie op hover telt niet als "motion". */
  }
}