/**
 * Purple Gym — de design tokens.
 *
 * Alles wat een maat, een kleur of een tijd is staat hier, en nergens anders.
 * De waarden komen één op één uit het aangeleverde ontwerp
 * (input/009. Purple Gym); verander ze hier en de hele site volgt.
 *
 * Breekpunten. Het ontwerp schakelt tussen twee standen: mobiel en desktop.
 * Dat schakelpunt lag in het ontwerp op 1100px, maar de breekpuntenschaal van
 * Klubb kent 375 / 768 / 1024 / 1440 en geen tussenwaarden. Daarom schakelt de
 * site op 1024px. Zie CONVENTIES.md, dit is de enige bewuste afwijking van het
 * ontwerp.
 *
 *   375   mobiel      basis, mobile first
 *   768   tablet
 *  1024   laptop      hier schakelt het ontwerp naar de desktopstand
 *  1440   desktop
 *
 * Een media query kan geen custom property lezen, dus de getallen staan
 * hieronder ook letterlijk.
 */

:root {
  --bp-mobiel: 375px;
  --bp-tablet: 768px;
  --bp-laptop: 1024px;
  --bp-desktop: 1440px;

  /* Kleinste toegestane tikdoel. Elke knop, link en invoer haalt dit. */
  --tikdoel: 44px;

  /* ── Kleur ───────────────────────────────────────────────────────────── */
  /* Merkkleuren (huisstijl Purple Gym) */
  --brand-purple: #a988aa;
  --brand-sand: #d8d5c7;
  --brand-ink: #232323;

  /* Afgeleid en aangevuld */
  --bg: #ffffff;
  --surface: #f4f3ee; /* lichte tint van zand, kaarten */
  --surface-warm: var(--brand-sand);
  --surface-dark: var(--brand-ink);
  /* Lichte tint van hetzelfde paars. Letterlijk uitgerekend en niet met
     color-mix: Safari onder 16.2 kent die functie niet en liet het vlak dan
     wit, wat op een witte pagina niet opvalt tot de klant ernaar vraagt. */
  --surface-purple-soft: #f1ebf1;
  --text: var(--brand-ink);
  --text-muted-strong: #3a3a3a;
  --text-muted: rgba(35, 35, 35, 0.7);
  --text-on-dark: #ffffff;
  --text-on-dark-muted: rgba(255, 255, 255, 0.68);
  --accent: var(--brand-purple);
  --accent-strong: var(--brand-purple);
  --cta: var(--brand-purple);
  --on-cta: var(--brand-ink);
  --on-accent: #ffffff;
  --border: #dedbd0;
  --border-warm: var(--brand-sand);
  --border-on-dark: rgba(255, 255, 255, 0.16);
  --focus-ring: var(--accent-strong);
  --fout: #b3261e;

  /* ── Typografie ──────────────────────────────────────────────────────── */
  /* the-seasons en proxima-nova komen uit de Adobe Fonts-kit van Purple Gym.
     Zolang de kit-id niet is ingevuld (src/lib/fonts.ts) valt de kop terug op
     een serif en de body op Helvetica Neue — precies zoals het ontwerp zelf
     doet, dus er verschuift niets in de opmaak. */
  --font-heading: 'the-seasons', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --font-body: 'proxima-nova', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --h1-size: 72px;
  --h1-lh: 76px;
  --h1-weight: 300;
  --h1-ls: -1px;
  --h2-size: 56px;
  --h2-lh: 60px;
  --h2-weight: 300;
  --h2-ls: -0.5px;
  --h3-size: 32px;
  --h3-lh: 38px;
  --h3-weight: 300;
  --sub-font: var(--font-heading);
  --sub-size: 28px;
  --sub-lh: 36px;
  --sub-weight: 300;
  --body-size: 20px;
  --body-lh: 32px;
  --body-weight: 400;
  --body-ls: 0.4px;
  --label-size: 14px;
  --label-weight: 500;
  --label-ls: 1px;
  /* Vetgedrukt. Staat niet in de export, want een ontwerpprogramma kent geen
     <strong>: dit is het gewicht dat het ontwerp overal voor nadruk gebruikt,
     zodat vetgedrukte tekst in een CMS-veld niet op de 700 van de browser
     uitkomt. Zie de regel voor strong en b hieronder. */
  --bold-weight: 600;
  --price-size: 64px;
  --nav-size: 15px;
  --nav-weight: 500;
  --nav-gap: 2px;
  --nav-mobile-size: 32px;

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --container: 1240px;
  --container-header: calc(var(--container) + 2 * var(--gutter));
  --gutter: 24px;
  --section-y: 140px;
  --gap-cards: 32px;
  --gap-y: 40px;
  --header-h: 112px;
  --header-h-sticky: 96px;
  /**
   * Op 03-11-2026 van 72 naar 88 gezet: de klant zag het logo en de menupil te
   * dicht op de bovenkant van het scherm zitten. De pil is 56 hoog, dus in een
   * balk van 72 bleef er maar 8 pixels boven en onder over. Nu is dat 16.
   *
   * Deze maat doet twee dingen tegelijk, want de balk krimpt niet bij
   * scrollen: hij bepaalt de ruimte boven het logo én de hoogte van de
   * meelopende balk. `--header-h-sticky` hierboven wordt nergens gebruikt.
   */
  --header-h-mobile: 88px;

  /* ── Vorm ────────────────────────────────────────────────────────────── */
  --radius-card: 10px;
  --radius-media: 10px;
  --radius-input: 10px;
  --radius-pill: 10px;

  /* ── Beweging ────────────────────────────────────────────────────────── */
  --dur: 300ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-reveal: cubic-bezier(0.22, 1, 0.36, 1);
  --hover-scale: 1.04;

  /* ── Knoppen ─────────────────────────────────────────────────────────── */
  --btn-height: 56px;
  --btn-height-sm: 44px;
  --btn-icon: 42px;
  --btn-icon-sm: 32px;
  --btn-font-size: 16px;
  --btn-font-size-sm: 14px;
  --btn-pad-right: 22px;
  --btn-pad-right-sm: 16px;
  --btn-gap: 12px;
  --btn-gap-sm: 10px;
  --btn-primary-bg: var(--brand-purple);
  --btn-primary-fg: #ffffff;
  --btn-primary-icon-bg: #ffffff;
  --btn-primary-icon-fg: var(--accent-strong);
  --btn-inverse-bg: #ffffff;
  --btn-inverse-fg: var(--text);
  --btn-inverse-icon-bg: var(--brand-purple);
  --btn-inverse-icon-fg: var(--brand-ink);
  --btn-secondary-fg: var(--text);
  --btn-compact-height: 38px;
  --btn-compact-font-size: 15px;
  --link-font-size: 16px;

  /* ── Formulier ───────────────────────────────────────────────────────── */
  --input-h: 64px;
  --input-font-size: 18px;
}

/**
 * Vanaf de laptopbreedte trekt het ontwerp de letterafstand van een H2 verder
 * aan: elke sectie zet daar `-1px` waar de telefoonstand `-0.5px` houdt. De
 * waarde hierboven is de telefoonstand, dus hier staat de brede.
 */
@media (min-width: 1024px) {
  :root {
    --h2-ls: -1px;
  }
}

/* Het ontwerp verkleint koppen en secties onder de tabletbreedte. */
@media (max-width: 767px) {
  :root {
    --h1-size: 44px;
    --h1-lh: 48px;
    --h2-size: 36px;
    --h2-lh: 40px;
    --body-size: 18px;
    --body-lh: 29px;
    --section-y: 80px;
  }
}

/* ── Basis ─────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* Voorkomt horizontale scroll door een enkel te breed element. */
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/**
 * Geen regelafstand op de body.
 *
 * Het ontwerp zet er ook geen: elk onderdeel noemt zijn eigen regelafstand en
 * wat dat niet doet staat op `normal`. Hier stond 1,55, en dat erfde door naar
 * elk label, elke pil en elke voetregel die er zelf niets over zegt. Die waren
 * daarmee een paar pixels hoger dan in het ontwerp — klein per stuk, maar het
 * telt op over een pagina en het maakte de typografie onrustig.
 */
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: normal;
  -webkit-font-smoothing: antialiased;
}

img,
video,
svg,
iframe {
  max-width: 100%;
}

img,
video {
  height: auto;
}

a {
  color: var(--text);
}

a:hover {
  color: var(--accent-strong);
}

/**
 * Vetgedrukte tekst volgt het ontwerp en niet de browser.
 *
 * Zonder deze regel zet de browser <strong> en <b> op 700, en 700 komt in dit
 * ontwerp nergens voor: nadruk is hier 600. Het valt pas op als je erop let —
 * zolang de Adobe-kit geen Semibold heeft maakt de browser voor 600 én 700
 * zelf een vetter beeld, dus ze lijken op elkaar. Zodra Semibold aan de kit is
 * toegevoegd krijgt 600 een echte snede en 700 nog steeds een nagemaakte, en
 * dan staat vetgedrukte tekst in een CMS-veld anders dan de rest van de site.
 *
 * Gevonden op /privacy, waar twaalf tussenkopjes in de juridische tekst als
 * <strong> in de aangeleverde tekst staan. De componenten zetten dit zelf al
 * goed (de voet, de namen bij de beoordelingen); het ging alleen mis in tekst
 * die uit een veld komt, en daar kan de klant morgen zelf iets vetmaken.
 */
strong,
b {
  font-weight: var(--bold-weight);
}

input,
textarea,
select,
button {
  font: inherit;
}

input::placeholder,
textarea::placeholder {
  color: rgba(35, 35, 35, 0.45);
}

/* De inhoudsbreedte van het ontwerp: 1240px met 24px marge ernaast. */
.binnen {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Elke knop, menulink en formulierveld haalt het minimum tikdoel. */
.knop,
button,
input,
select,
textarea,
nav a {
  min-height: var(--tikdoel);
}

/* Zichtbare focus, ook als een onderdeel zijn eigen opmaak meebrengt. */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Overslaan naar de inhoud, voor toetsenbord en schermlezer. */
.overslaan {
  position: absolute;
  left: -9999px;
}

.overslaan:focus {
  left: var(--gutter);
  top: 8px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: var(--tikdoel);
  padding: 12px 16px;
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--brand-ink);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}