/* ============================================================================
   Vers & Belegd — centrale design tokens
   Dit bestand is de ENIGE bron voor kleuren, fonts, spacing, radius en
   schaduwen. Het wordt 1-op-1 gebruikt door zowel de marketingsite
   (vers-en-belegd-site) als de bestelsite (vers-en-belegd-bestellen).

   LET OP: dit zijn twee aparte Cloudflare Pages-projecten/repo's, dus dit
   bestand moet handmatig in sync gehouden worden op twee plekken:
     - vers-en-belegd-site-export/vers-en-belegd-site/tokens.css  (marketing)
     - vers-en-belegd-bestellen/assets/tokens.css                 (bestellen)
   Wijzig je een kleur/font/radius? Doe dat op beide plekken.
   ========================================================================= */

:root{
  /* ===== kleuren (brandbook) ===== */
  --rose:#e1b7ab;
  --rose-deep:#d29e90;
  --rose-ink:#9c6355;      /* voor tekst-op-wit — voldoet aan WCAG AA, --rose zelf niet */
  --rose-wash:#faf1ec;     /* lichte achtergrond / "cream" */
  --rose-mist:#f3e4de;
  --paper:#ffffff;
  --ink:#000000;
  --ink-soft:#2b2320;
  --line:#ecdcd5;

  /* status-kleuren (bestelsite: bevestigingen/foutmeldingen) */
  --ok-bg:#e6f4e6; --ok-ink:#1a5c1a;
  --fout-bg:#fbe8e6; --fout-ink:#8a2b20;

  /* ===== typografie ===== */
  --font-display:'Gloria Hallelujah','Segoe Print',cursive;
  --font-body:'Lato',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  /* ===== layout ===== */
  --wrap:1160px;
  --r:20px;           /* standaard radius: kaarten, foto's */
  --r-sm:12px;         /* kleinere radius: velden, chips */
  --r-pill:999px;       /* knoppen, badges, categorie-pills */

  /* ===== schaduwen ===== */
  --shadow-s:0 6px 18px -12px rgba(60,30,20,.35);
  --shadow-m:0 20px 44px -26px rgba(60,30,20,.42);
  --shadow-l:0 40px 80px -40px rgba(60,30,20,.5);

  /* ===== animatie ===== */
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur-fast:.18s;
  --dur-med:.4s;
}

/* ---- gedeelde basisreset ---- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

/* ---- gedeelde knoppen ---- */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--font-body);font-weight:900;font-size:1rem;
  padding:.92em 1.6em;border-radius:var(--r-pill);border:2px solid transparent;
  cursor:pointer;transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
  line-height:1;text-decoration:none;
}
.btn:focus-visible{outline:3px solid var(--rose-ink);outline-offset:3px}
.btn svg{width:1.05em;height:1.05em}
.btn-primary{background:var(--ink);color:#fff;box-shadow:0 12px 26px -14px rgba(0,0,0,.55)}
.btn-primary:hover{background:#241d1a;transform:translateY(-2px);box-shadow:0 18px 32px -14px rgba(0,0,0,.6)}
.btn-rose{background:var(--rose);color:var(--ink);box-shadow:0 12px 26px -14px rgba(156,99,85,.6)}
.btn-rose:hover{background:var(--rose-deep);transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:#fff}
.btn-light{background:#fff;color:var(--ink);border-color:#fff}
.btn-light:hover{background:transparent;color:#fff;border-color:#fff}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none !important}

/* ---- gedeeld broodje-lijnmotief ---- */
.roll{display:inline-block;color:var(--rose-ink)}
.roll svg{display:block}

/* ---- gedeelde eyebrow-stijl ---- */
.eyebrow{
  font-family:var(--font-body);font-weight:900;font-size:.72rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--rose-ink);
  display:inline-flex;align-items:center;gap:.6em;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--rose-deep);display:inline-block}

/* ---- focus-states (toegankelijkheid) — geldt voor alle interactieve elementen ---- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:3px solid var(--rose-ink);outline-offset:2px;
}