/*
 * CRO-redesign design tokens — "probeer eerst" (Fase 3).
 * VOORBEREID, NOG NIET INGELADEN. Dit bestand is bewust in GEEN enkel template
 * opgenomen: het raakt de live site pas als Fase 3 (visueel redesign) start.
 * Bron: design-handoff `design_handoff_cro_redesign` (README §Design Tokens).
 *
 * Aanpak bij toepassen: eerst de --cro-* tokens 1-op-1 mappen op de bestaande
 * site-variabelen (zodat één plek de rebrand aanstuurt), daarna per scherm
 * (homepage 1b/2d, packpagina 2a, checkout 2c) uitrollen. Het paars van de
 * huidige site vervalt; #8a5a3b wordt de ENIGE kleur voor alles wat geld oplevert.
 */

:root {
  /* ── Achtergronden ─────────────────────────────────────────────── */
  --cro-bg-page: #faf7f2;   /* pagina */
  --cro-bg-soft: #f1ece3;   /* zachte secties, chips */
  --cro-bg-card: #fdfcfa;   /* kaarten */

  /* ── Ink (tekst) ───────────────────────────────────────────────── */
  --cro-ink-heading: #1c1917;
  --cro-ink-body: #44403c;
  --cro-ink-secondary: #57534e;
  --cro-ink-tertiary: #78716c;
  --cro-ink-placeholder: #a8a29e;

  /* ── Accent: ALLE koop-CTA's, en niets anders ──────────────────── */
  --cro-accent: #a1511f;
  --cro-accent-hover: #8a4419;   /* ~10% donkerder */
  --cro-accent-ink: #faf7f2;     /* tekst op accent */

  /* ── Lijnen & vorm ─────────────────────────────────────────────── */
  --cro-line: #e7e0d5;
  --cro-line-strong: #d6d1c9;
  --cro-radius-card: 8px;
  --cro-radius-pill: 999px;
  --cro-shadow-card: 0 2px 12px rgba(28, 25, 23, 0.08);

  /* ── Typografie ────────────────────────────────────────────────── */
  /* Koppen: Newsreader (gewicht 500-600). UI/body: Archivo, min. 13px. */
  --cro-font-head: "Newsreader", Georgia, "Times New Roman", serif;
  --cro-font-ui: "Archivo", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Kopschaal (handoff): 52 / 42 / 32 / 28 / 21 px */
  --cro-h1: 3.25rem;   /* 52px */
  --cro-h2: 2.625rem;  /* 42px */
  --cro-h3: 2rem;      /* 32px */
  --cro-h4: 1.75rem;   /* 28px */
  --cro-h5: 1.3125rem; /* 21px */

  /* UI/body: 13-17px */
  --cro-text: 1rem;      /* 16px */
  --cro-text-sm: 0.9375rem; /* 15px */
  --cro-text-xs: 0.8125rem; /* 13px (minimum) */
}

/*
 * DARK MODE — nog te beslissen in Fase 3. De handoff is een licht ontwerp; de
 * huidige site heeft wel een donkere modus (data-thema="donker"). Opties:
 *  a) redesign-schermen forceren licht (eenvoudigst, minst risico),
 *  b) een donkere token-set afleiden (meer werk, consistenter met de site).
 * Niet hier invullen zonder besluit.
 */

/*
 * FONTS — zelf hosten, GEEN Google Fonts CDN (AVG: de CDN stuurt bezoekers-IP's
 * naar Google, in NL/EU een privacyrisico). Download de woff2's van Newsreader
 * (400/500/600) en Archivo (400/500/600), plaats in www/fonts/, en zet hier
 * @font-face-regels met font-display: swap. Placeholder:
 *
 * @font-face {
 *   font-family: "Newsreader";
 *   src: url("/fonts/newsreader-500.woff2") format("woff2");
 *   font-weight: 500; font-style: normal; font-display: swap;
 * }
 * @font-face {
 *   font-family: "Archivo";
 *   src: url("/fonts/archivo-400.woff2") format("woff2");
 *   font-weight: 400; font-style: normal; font-display: swap;
 * }
 */