/* Design tokens — De Tarweaar. Alleen hier staan kleurwaarden en maten. */
:root {
  /* Kleur: merk */
  --color-red: #ED1725;        /* merkrood: vlakken en decor, niet voor tekst < 24px */
  --color-red-ink: #C8101D;    /* knoppen, links, kleine rode tekst (5,9:1 op wit) */
  --color-red-deep: #A80D18;   /* hover, vlak in rode CTA */
  --color-orange: #F47728;     /* alleen decor */
  --color-gold: #F7B83E;       /* accent op donker */

  /* Kleur: neutraal */
  --color-ink: #221E1C;
  --color-text: #333333;
  --color-muted: #67615B;
  --color-paper: #F8F5EF;
  --color-paper-2: #EFE9DF;
  --color-white: #FFFFFF;
  --color-line: #DCD4C7;
  --color-line-strong: #BDB3A4;
  --color-photo-tone: #E7E0D4;

  /* Kleur: donkere sectie */
  --color-night: #1D1917;
  --color-night-text: #D9D1C6;
  --color-night-heading: #FBF8F3;
  --color-night-muted: #B9AFA3;
  --color-night-line: #4A423C;
  --color-night-rule: #5A514A;

  /* Kleur: rode sectie */
  --color-on-red: #FFFFFF;
  --color-on-red-line: rgba(255, 255, 255, 0.4);

  /* Typografie */
  --font-serif: 'Newsreader', 'Crimson Pro', Georgia, 'Times New Roman', serif;
  --font-sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --text-display: clamp(2.75rem, 6.4vw, 6.25rem);
  --text-h2: clamp(2.05rem, 4.1vw, 3.75rem);
  --text-h3: clamp(1.45rem, 2.1vw, 1.875rem);
  --text-statement: clamp(1.7rem, 3.1vw, 2.85rem);
  --text-lead: clamp(1.0625rem, 1.35vw, 1.25rem);
  --text-body: 1.0625rem;
  --text-small: 0.96875rem;
  --text-label: 0.75rem;
  --leading-tight: 1.04;
  --leading-body: 1.65;
  --tracking-label: 0.14em;

  /* Ruimte */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-section: clamp(5rem, 10vw, 9.5rem);
  --space-gutter: clamp(1rem, 2.2vw, 2rem);
  --space-page: clamp(1.25rem, 4.5vw, 4rem);
  --width-max: 82.5rem;
  --width-prose: 40rem;

  /* Randen en vormen */
  --border-hair: 1px solid var(--color-line);
  --border-strong: 1px solid var(--color-line-strong);
  --radius-none: 0;
  --radius-control: 2px;
  --shadow-none: none;

  /* Beweging */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration-fast: 250ms;
  --duration-reveal: 900ms;
  --reveal-distance: 24px;

  /* Overig */
  --header-height: 5.25rem;
  --focus-ring: 2px solid var(--color-red-ink);
}