/* ============================================================================
   STARLY MARLY — VISUAL DESIGN SYSTEM
   ----------------------------------------------------------------------------
   Mood: minimal · luxury · elegant · serene
   Doel: rust, herkenbaarheid, conversie (directe verkoop via Stripe)

   Drop-in: koppel dit bestand ná de Google-Fonts-link en vóór je pagina-CSS:
     <link href="...Cormorant+Garamond...&family=EB+Garamond..." rel="stylesheet">
     <link rel="stylesheet" href="design-system.css">

   Het systeem is opgebouwd in 6 lagen:
     1. Design tokens   (kleur · type · ruimte · lijn · timing)
     2. Reset & basis
     3. Typografie-hiërarchie
     4. Spacing & layout (wrapper · secties · kaarten · formulier-grid)
     5. Componenten — knoppen (default/hover/active/focus/disabled)
     6. Componenten — formuliervelden (default/hover/focus/invalid/disabled)

   Bestaande klassenamen (.cta, .cta.goud, .veld, .eyebrow) blijven werken;
   dit bestand verfijnt en consolideert ze.
   ========================================================================== */


/* ============================================================================
   1 · DESIGN TOKENS
   ========================================================================== */
:root {
  /* ── Kleur ───────────────────────────────────────────────────────────── */
  --bg:          #f7f4ee;   /* warme crème, paginabasis            */
  --bg-soft:     #f1ede4;   /* iets dieper: kaders, secties        */
  --bg-veld:     #fffdf9;   /* invoervelden — net lichter dan bg   */
  --tekst:       #2a221b;   /* hoofdtekst & koppen                 */
  --tekst-zacht: #443a2d;   /* lopende tekst, intro's              */
  --tekst-licht: #6f6456;   /* micro-copy, hints, captions         */
  --goud:        #b08a4a;   /* accent & primaire knop              */
  --goud-zacht:  #d4b888;   /* hover-lijnen, ornamenten            */
  --goud-diep:   #8f6f38;   /* active/pressed — donkerder goud     */
  --lijn:        #d8d0c2;   /* hairlines, randen velden            */
  --wit:         #ffffff;
  --fout:        #9a4a3c;   /* validatie — gedempt terracotta      */

  /* Focus-ring (toegankelijk, in huisstijl i.p.v. fel blauw) */
  --ring:        rgba(176, 138, 74, 0.35);

  /* ── Lettertypes ─────────────────────────────────────────────────────── */
  --font-head: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'EB Garamond', Georgia, serif;

  /* ── Type-schaal (responsive via clamp: mobiel → desktop) ───────────────
     min = telefoon, max = desktop; schaalt vloeiend daartussen.            */
  --fs-display: clamp(36px, 6.5vw, 58px);  /* wordmark / hero-logo-tekst    */
  --fs-h1:      clamp(30px, 5.2vw, 46px);
  --fs-h2:      clamp(26px, 4.2vw, 38px);
  --fs-h3:      clamp(23px, 3.0vw, 32px);
  --fs-h4:      clamp(19px, 2.2vw, 23px);
  --fs-lead:    clamp(18px, 2.1vw, 20px);  /* intro-/lead-paragraaf         */
  --fs-body:    20px;                       /* lopende tekst                 */
  --fs-quote:   clamp(20px, 3.0vw, 24px);  /* fragment-citaten              */
  --fs-small:   15px;                       /* secundaire tekst, links       */
  --fs-eyebrow: 12px;                       /* kapitaal-labels boven koppen  */
  --fs-micro:   13px;                       /* juridisch, voettekst          */

  /* ── Regelhoogte ─────────────────────────────────────────────────────── */
  --lh-tight: 1.15;   /* grote koppen          */
  --lh-snug:  1.3;    /* kleine koppen          */
  --lh-body:  1.65;   /* lopende tekst          */
  --lh-loose: 1.85;   /* contact / lijstjes     */

  /* ── Letterafstand ───────────────────────────────────────────────────── */
  --ls-eyebrow: 0.35em;   /* kapitaal-labels                */
  --ls-caps:    0.16em;   /* wordmark / knoppen in kapitaal */
  --ls-knop:    0.12em;
  --ls-normaal: 0.01em;

  /* ── Spacing-schaal (rustige 8-punts ritmiek, premium = ruim) ─────────── */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs:  12px;
  --space-sm:  18px;
  --space-md:  28px;
  --space-lg:  44px;
  --space-xl:  64px;
  --space-2xl: 88px;
  --space-3xl: 120px;

  /* ── Maten & ritme ───────────────────────────────────────────────────── */
  --maxw-tekst:  720px;   /* leesbreedte homepage-wrapper   */
  --maxw-smal:   600px;   /* checkout / formulier           */
  --maxw-prose:  580px;   /* alineabreedte binnen secties   */
  --sectie-y:    clamp(56px, 9vw, 96px);   /* verticale sectiepadding */
  --wrapper-x:   clamp(24px, 5vw, 32px);   /* horizontale marge       */

  /* ── Randen & vorm (editorial = strak, vrijwel geen radius) ───────────── */
  --radius:    2px;       /* velden/knoppen: subtiel, niet rond */
  --border:    1px solid var(--lijn);

  /* ── Beweging ────────────────────────────────────────────────────────── */
  --transition: 0.3s ease;
  --transition-snel: 0.2s ease;
}


/* ============================================================================
   2 · RESET & BASIS
   ========================================================================== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--tekst);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Respecteer gebruikersvoorkeur: rustige site, geen opgedrongen animatie */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}


/* ============================================================================
   3 · TYPOGRAFIE-HIËRARCHIE
   ----------------------------------------------------------------------------
   Koppen: Cormorant Garamond, licht gewicht, ruime maar niet brede tracking.
   Tekst:  EB Garamond. Italic = warme, persoonlijke noot (geen schreeuw).
   ========================================================================== */

.h-display {            /* hero-wordmark / merknaam groot */
  font-family: var(--font-head);
  font-size: var(--fs-display);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--tekst);
}

h1, .h1 {
  font-family: var(--font-head);
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--tekst);
}

h2, .h2 {
  font-family: var(--font-head);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
  color: var(--tekst);
}

h3, .h3 {
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
  color: var(--tekst);
}

h4, .h4 {
  font-family: var(--font-head);
  font-size: var(--fs-h4);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: 0;
  color: var(--tekst);
}

/* Italic koppen (Cormorant 300 italic = de zachte, literaire variant) */
.h-italic {
  font-family: var(--font-head);
  font-style: italic;
  font-weight: 300;
}

/* Lopende tekst */
p, .body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--tekst-zacht);
}

/* Lead / intro — iets groter, in Cormorant voor editoriale rust */
.lead {
  font-family: var(--font-head);
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--tekst-zacht);
  max-width: var(--maxw-prose);
  margin-inline: auto;
}

/* Eyebrow — kapitaal-label boven een kop */
.eyebrow {
  font-family: var(--font-head);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--goud);
}
.eyebrow.stil { color: var(--tekst-licht); }   /* variant: ingetogen */

/* Citaat / fragment */
.quote {
  font-family: var(--font-head);
  font-style: italic;
  font-size: var(--fs-quote);
  line-height: 1.55;
  color: var(--tekst);
  max-width: 560px;
  margin-inline: auto;
}

/* Micro-copy — hints, voettekst, juridisch */
.micro {
  font-size: var(--fs-micro);
  line-height: 1.5;
  color: var(--tekst-licht);
  letter-spacing: var(--ls-normaal);
}

/* Italic accent binnen tekst */
em { font-style: italic; }

/* Tekstlinks in lopende tekst */
a.tekst-link {
  color: var(--goud);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
}
a.tekst-link:hover { border-bottom-color: var(--goud-zacht); }


/* ============================================================================
   4 · SPACING & LAYOUT
   ========================================================================== */

/* Leeswrapper homepage */
.wrapper {
  max-width: var(--maxw-tekst);
  margin-inline: auto;
  padding-inline: var(--wrapper-x);
}

/* Smalle wrapper: checkout, bedankpagina */
.wrapper-smal {
  max-width: var(--maxw-smal);
  margin-inline: auto;
  padding-inline: var(--wrapper-x);
}

/* Verticaal sectieritme — de 'serene ademruimte' */
.section        { padding-block: var(--sectie-y); }
.section-tight  { padding-block: clamp(40px, 6vw, 64px); }
.section-loose  { padding-block: clamp(72px, 11vw, 120px); }

/* Gecentreerde tekstkolom binnen een sectie */
.prose {
  max-width: var(--maxw-prose);
  margin-inline: auto;
  text-align: center;
}
.prose > * + * { margin-top: var(--space-sm); }   /* verticaal ritme */

/* Hairline-scheiding (productkaarten, FAQ-items) */
.divide-top    { border-top: var(--border); }
.divide-bottom { border-bottom: var(--border); }

/* Productkaart */
.card {
  padding-block: var(--space-lg);
  text-align: center;
}

/* Formulier-grid — verticaal, ruim, één kolom (rustige checkout) */
.form-grid {
  display: grid;
  gap: var(--space-md);
  max-width: var(--maxw-smal);
  margin-inline: auto;
}

/* Twee velden naast elkaar op desktop (bv. datum + uur), gestapeld op mobiel */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}
@media (max-width: 520px) {
  .form-row { grid-template-columns: 1fr; }
}

/* Ornament-scheiding */
.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-block: var(--space-2xl);
}
.ornament .lijn { flex: 0 0 80px; height: 1px; background: var(--goud-zacht); }
.ornament .ster { color: var(--goud); font-size: 14px; letter-spacing: 0.3em; }


/* ============================================================================
   5 · COMPONENT — KNOPPEN
   ----------------------------------------------------------------------------
   Staten: default · hover · active · focus-visible · disabled
   .btn            basis
   .btn--primary   gevulde gouden knop (hoofd-CTA, conversie)
   .btn--secondary outline-knop (neutrale acties)
   .btn--ghost     tekstlink-knop (tertiair)
   .btn--block     volle breedte (checkout)
   ========================================================================== */

.btn {
  display: inline-block;
  padding: 15px 36px;
  font-family: var(--font-head);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: var(--ls-knop);
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  border: 1px solid var(--tekst);
  border-radius: var(--radius);
  background: transparent;
  color: var(--tekst);
  cursor: pointer;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition-snel);
  -webkit-appearance: none;
  appearance: none;
}
.btn:hover  { background: var(--tekst); color: var(--bg); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}

/* Primair — de gouden conversieknop */
.btn--primary {
  background: var(--goud);
  border-color: var(--goud);
  color: var(--wit);
}
.btn--primary:hover {
  background: transparent;
  color: var(--goud);
  border-color: var(--goud);
}
.btn--primary:active {
  background: var(--goud-diep);
  border-color: var(--goud-diep);
  color: var(--wit);
  transform: translateY(1px);
}

/* Secundair — neutrale outline (bestaande .cta-look) */
.btn--secondary {
  background: transparent;
  border-color: var(--tekst);
  color: var(--tekst);
}
.btn--secondary:hover { background: var(--tekst); color: var(--bg); }

/* Ghost — tertiaire tekstknop */
.btn--ghost {
  border: none;
  padding: 6px 2px;
  text-transform: none;
  letter-spacing: var(--ls-normaal);
  color: var(--tekst-zacht);
  border-bottom: 1px solid var(--lijn);
}
.btn--ghost:hover { background: transparent; color: var(--goud); border-bottom-color: var(--goud-zacht); }

/* Volle breedte (checkout-submit) */
.btn--block { display: block; width: 100%; }

/* Uitgeschakeld / bezig */
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Regel onder de knop (geruststelling) */
.onder-knop {
  font-family: var(--font-head);
  font-style: italic;
  font-size: var(--fs-small);
  color: var(--tekst-licht);
  margin-top: var(--space-xs);
}

/* Compatibiliteit met bestaande markup: .cta en .cta.goud */
.cta        { /* alias van .btn */ }
.cta.goud   { /* alias van .btn--primary */ }


/* ============================================================================
   6 · COMPONENT — FORMULIERVELDEN
   ----------------------------------------------------------------------------
   Staten: default · hover · focus · invalid · disabled
   Werkt voor text, email, date, time, select en textarea.
   ========================================================================== */

.field { margin-bottom: var(--space-md); text-align: left; }

.field > label {
  display: block;
  font-family: var(--font-head);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tekst-zacht);
  margin-bottom: var(--space-2xs);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 15px;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.4;
  color: var(--tekst);
  background: var(--bg-veld);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  outline: none;
  transition: border-color var(--transition-snel), box-shadow var(--transition-snel);
  -webkit-appearance: none;
  appearance: none;
}

.field input::placeholder,
.field textarea::placeholder { color: var(--tekst-licht); }

/* Hover */
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--goud-zacht); }

/* Focus — gouden rand + zachte ring (toegankelijk) */
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--goud);
  box-shadow: 0 0 0 3px var(--ring);
}

/* Invalid — pas zichtbaar nadat de gebruiker iets heeft ingevuld */
.field input:user-invalid,
.field select:user-invalid,
.field textarea:user-invalid {
  border-color: var(--fout);
  box-shadow: 0 0 0 3px rgba(154, 74, 60, 0.18);
}

/* Disabled */
.field input:disabled,
.field select:disabled,
.field textarea:disabled {
  background: var(--bg-soft);
  color: var(--tekst-licht);
  cursor: not-allowed;
}

.field textarea { min-height: 96px; resize: vertical; }

/* Select — eigen pijl in huisstijl (geen systeem-grijs) */
.field select {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%238a7f74' stroke-width='1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

/* date/time — consistente hoogte, accent in huisstijlkleur */
.field input[type="date"],
.field input[type="time"] { color: var(--tekst); }
.field input[type="date"]::-webkit-calendar-picker-indicator,
.field input[type="time"]::-webkit-calendar-picker-indicator {
  opacity: 0.55;
  cursor: pointer;
  transition: opacity var(--transition-snel);
}
.field input[type="date"]:hover::-webkit-calendar-picker-indicator,
.field input[type="time"]:hover::-webkit-calendar-picker-indicator { opacity: 0.9; }

/* Hint onder een veld */
.field .hint {
  font-size: 14px;
  font-style: italic;
  color: var(--tekst-licht);
  margin-top: var(--space-3xs);
  line-height: 1.5;
}

/* Checkbox-/radiokeuze als label-regel */
.field label.keuze {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 16px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--tekst-zacht);
  margin-bottom: 10px;
  cursor: pointer;
}
.field label.keuze input { width: auto; margin-top: 5px; flex: 0 0 auto; accent-color: var(--goud); }

/* Blok-/groepstitel binnen een formulier (bv. Persoon 1 / Persoon 2) */
.blok-titel {
  font-family: var(--font-head);
  font-size: var(--fs-micro);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--goud);
  border-bottom: var(--border);
  padding-bottom: 10px;
  margin: var(--space-lg) 0 var(--space-md);
}

/* Statusregel onder het formulier */
.form-status {
  text-align: center;
  font-family: var(--font-head);
  font-style: italic;
  color: var(--tekst-licht);
  margin-top: var(--space-sm);
  min-height: 22px;
}

/* Honeypot (anti-spam) */
.hp { position: absolute; left: -9999px; }


/* ============================================================================
   EINDE — Starly Marly Design System
   ========================================================================== */