:root {
  /* Colors */
  --nb-salmon: #E47463;
  --nb-coral: var(--nb-salmon); /* alias */
  --nb-ink: #2F322F;
  --nb-beige: #F0EAE4;
  --nb-white: #FFFFFF;
  --nb-border: #DCD2C8;
  --nb-border-25: #5A5A55;
  --nb-beige-50: #F7F4F1;
  --nb-short-yellow: #FCDD64;

  /* Radii */
  --radius-large: 20px;
  --radius-pill: 100px;
  --radius-extra-small: 6px;

  /* Shadows */
  --ring-white: 0 0 0 4px #FFFFFF;

  /* Layout */
  --width-frame: 1790px;
  --gutter-card: 60px;
  --gutter-text: 120px;
  --width-card: 1680px;
  --width-wizard: 900px;
  --width-carroussel: 630px;
  --width-text: 600px;
  --width-column: 360px;
  --width-nav: 280px;
  --height-scrollnav: 120px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-14: 14px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-60: 60px;
  --spacing-96: 96px;
  --spacing-120: 120px;

  /* Icon-button afmetingen (ronde knoppen/toggles) */
  --icon-size-small: 32px;
  --icon-size-medium: 40px;
  --icon-size-large: 44px;

  /* Motion */
  --duration-base: 200ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Fonts */
  --font-display: 'Unytour', sans-serif;
  --font-body: 'Hanken Grotesk', sans-serif;

  /* Font sizes — komt overeen met de rollen in de typografie-tabel (CLAUDE.md §2.3) */
  --font-size-60: 60px;
  --font-size-50: 50px;
  --font-size-40: 40px;
  --font-size-36: 36px;
  --font-size-28: 28px;
  --font-size-24: 24px;
  --font-size-22: 22px;
  --font-size-20: 20px;
  --font-size-18: 18px;
  --font-size-16: 16px;
  --font-size-15: 15px;
  --font-size-14: 14px;
  --font-size-13: 13px;

  /* Line-heights — de vaste set uit CLAUDE.md §2.3 ("1 · 1.2 · 1.4 · 1.6 · 1.8"),
     plus --line-height-price voor de meerregelige prijslabels (1.5, uit de
     design-hand-off) */
  --line-height-tight: 1;
  --line-height-snug: 1.2;
  --line-height-normal: 1.4;
  --line-height-relaxed: 1.6;
  --line-height-loose: 1.8;
  --line-height-price: 1.5;

  /* Letter-spacing — CLAUDE.md §2.3: "+0.02em (display/body), +0.03em
     (headings, labels, button text)", plus de eyebrow-tracking uit §2.1 */
  --letter-spacing-body: 0.02em;
  --letter-spacing-heading: 0.03em;
  --letter-spacing-eyebrow: 0.16em;

  /* Border */
  --border-width: 1px;
}

@font-face {
  font-family: 'Unytour';
  src: url("../fonts/Unytour-Light-owxRsBI.otf") format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Unytour';
  src: url("../fonts/Unytour-SemiBold-bHBuYdE.otf") format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hanken Grotesk';
  src: url("../fonts/HankenGrotesk-VariableFont_wght-GAdSZiz.ttf") format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hanken Grotesk';
  src: url("../fonts/HankenGrotesk-Italic-VariableFont_wght-BoK7xY2.ttf") format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}