:root {
  /* ── Kleuren ── */
  --color-pure-white:   #ffffff;
  --color-ink-black:    #000000;
  --color-obsidian:     #1f1f1f;
  --color-graphite:     #333333;
  --color-slate:        #666666;
  --color-steel:        #808080;
  --color-fog:          #999999;
  --color-pale-mist:    #cccccc;
  --color-vapor:        #e6e6e6;
  --color-ash:          #f2f2f2;

  /* ── Typografie families ── */
  --font-display: '247 grotesk', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Ntbau', 'Inter', ui-sans-serif, system-ui, sans-serif;

  /* ── Typografie schaal ── */
  --text-caption:     10px;
  --text-label:       11px;
  --text-body:        14px;
  --text-body-lg:     16px;
  --text-subheading:  19px;
  --text-heading-sm:  28px;
  --text-heading:     35px;
  --text-heading-lg:  52px;
  --text-display:     73px;

  /* ── Line heights ── */
  --leading-tight:    1.0;
  --leading-snug:     1.14;
  --leading-normal:   1.2;
  --leading-relaxed:  1.25;
  --leading-loose:    1.89;

  /* ── Letter spacing ── */
  --tracking-label:   0.019em;

  /* ── Font weights ── */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

  /* ── Spacing ── */
  --sp-4:   4px;
  --sp-8:   8px;
  --sp-12:  12px;
  --sp-16:  16px;
  --sp-20:  20px;
  --sp-24:  24px;
  --sp-32:  32px;
  --sp-48:  48px;
  --sp-56:  56px;
  --sp-64:  64px;
  --sp-80:  80px;
  --sp-112: 112px;
  --sp-128: 128px;

  /* ── Border-radius ── */
  --radius-card:   33.76px;
  --radius-button: 42.96px;

  /* ── Layout ── */
  --page-max:      1440px;
  --page-gutter:   clamp(24px, 5vw, 80px);
}