/* ===================================================================
   De Fitte Pan — Colors & Type Tokens
   ===================================================================
   Bron: reference/de-fitte-pan-app.html (live PWA, mei 2026)
   Volledige token-set voor de hoofd-app + sub-merken De Kleine Pan
   en Wijn Spijs Vibes. Importeer fonts/fonts.css apart.
   ------------------------------------------------------------------- */

:root {
  /* ---------- TYPE FAMILIES ---------- */
  --font-serif:  'Cormorant Garamond', 'Cormorant', Garamond, 'Iowan Old Style', 'Apple Garamond', Georgia, serif;
  --font-sans:   'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:   ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- PRIMARY (terracotta) ---------- */
  --terra:        #c0593a;   /* primary action, badges, CTA, h-accents */
  --terra-d:      #9c4329;   /* hover-state op terra */
  --terra-l:      #d97b5d;   /* zachter terra voor extras-borders */

  /* ---------- SECONDARY (olive) ---------- */
  --olive:        #7a8745;   /* succes, bonus, headings, ghost button border */
  --olive-d:      #5a6533;   /* hover, donker-olive voor WSV titles */
  --olive-l:      #9aa860;   /* sub-tinten in semi-transparant gebruik */
  /* Legacy alias — code in productie gebruikt nog --forest. Houd in sync. */
  --forest:       #7a8745;
  --forest-d:     #5a6533;
  --forest-l:     #9aa860;

  /* ---------- NEUTRALS (cream) ---------- */
  --cream:        #fafaf6;   /* page background — default */
  --cream-2:      #fdfaf5;   /* alt-card-background, WSV-header top */
  --cream-d:      #f0ebe0;   /* badge-bg, divider-segments */
  --cream-dd:     #e4dccc;   /* zwaardere cream voor donker-op-cream */

  /* ---------- INK & GRAYS ---------- */
  --ink:          #2a2520;   /* primaire tekst (warm-zwart, geen #000) */
  --gray-1:       #6b665e;   /* secundaire tekst */
  --gray-2:       #8d8983;   /* meta, labels */
  --gray-3:       #cfc8bc;   /* default border */
  --gray-4:       #e0dbd0;   /* light divider */
  --gray-5:       #ede9e2;   /* zachte vlak­achter­grond */

  /* ---------- SEMANTIC ---------- */
  --ok:           #7a8745;
  --ok-l:         #aeb877;
  --warn:         #d4a93a;
  --bad:          #c0593a;

  /* ---------- BONUS (groen-positief op bonus-aanbieding) ---------- */
  --bonus:        #7a8745;
  --bonus-bg:     rgba(122, 135, 69, 0.12);
  --bonus-bd:     rgba(122, 135, 69, 0.30);

  /* ---------- HIGHLIGHT (mosterd op match-tags) ---------- */
  --highlight:    #faf3e3;
  --highlight-bd: #e8d488;

  /* ---------- ACCENTS ---------- */
  --bordeaux:     #a04230;   /* disclaimer, ernstig elegant */
  --bordeaux-d:   #7a3022;
  --gold:         #b08d57;   /* sterren in KP, badges in More-menu */

  /* ---------- ELEVATION (warm bruine onder­toon, geen grijs/zwart) ---------- */
  --shadow:       0 2px  12px rgba(122, 87, 69, 0.08);
  --shadow-h:     0 8px  24px rgba(122, 87, 69, 0.14);
  --shadow-tray:  0 -8px 32px rgba(122, 87, 69, 0.18);

  /* ---------- RADII ---------- */
  --radius:       12px;   /* cards, buttons, panels */
  --radius-sm:    8px;    /* inputs, chips, small buttons */
  --radius-lg:    16px;   /* hero, modal, large panels */
  --radius-pill:  30px;   /* profile button, mode-toggle */

  /* ---------- SPACING (4 px basis) ---------- */
  --space-1:      4px;
  --space-2:      8px;
  --space-3:      12px;
  --space-4:      16px;
  --space-5:      22px;
  --space-6:      28px;
  --space-7:      36px;
  --space-8:      44px;

  /* ---------- TYPE SCALE (rems) ---------- */
  --fs-eyebrow:   11px;     /* uppercase tracked */
  --fs-meta:      12px;
  --fs-caption:   12.5px;
  --fs-body-sm:   13px;
  --fs-body:      14.5px;   /* default body in cards */
  --fs-body-lg:   15px;     /* buttons, tabs, lede */
  --fs-h4:        17px;     /* card titles in KP */
  --fs-h3:        22px;     /* section headings, store-head */
  --fs-h2:        24px;     /* page section h2 */
  --fs-h1:        32px;     /* app h1 */
  --fs-display:   38px;     /* WSV-title, KP-title */
  --fs-display-l: 44px;     /* KP-slide-title */

  /* ---------- LINE HEIGHTS ---------- */
  --lh-tight:     1.1;      /* large display titles */
  --lh-snug:      1.25;     /* card titles */
  --lh-normal:    1.55;     /* body default */
  --lh-loose:     1.7;      /* recipe modal copy */

  /* ---------- LETTER SPACING ---------- */
  --ls-display:   -0.5px;   /* large display, slightly tight */
  --ls-h:         -0.2px;
  --ls-body:      0;
  --ls-eyebrow:   1.4px;    /* uppercase tracked */
  --ls-eyebrow-l: 2px;      /* WSV-eyebrow, extra-tracked */

  /* ---------- TRANSITIONS ---------- */
  --t-fast:       0.12s ease;
  --t-base:       0.15s ease;
  --t-card:       0.18s ease;
  --t-pane:       0.28s ease-out;
}

/* =====================================================================
   SEMANTIC ELEMENT STYLES
   Defaults waarmee een vrije HTML-pagina meteen "De Fitte Pan" voelt.
   ===================================================================== */

html, body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display headings — Cormorant serif */
h1, .h1 {
  font-family: var(--font-serif);
  font-size: var(--fs-h1);
  font-weight: 600;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  color: var(--olive-d);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  font-weight: 600;
  letter-spacing: var(--ls-h);
  line-height: var(--lh-snug);
  color: var(--olive-d);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--olive-d);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--ink);
  margin: 0;
}

/* Display-italic variants — voor WSV en De Kleine Pan */
.h-display, .display {
  font-family: var(--font-serif);
  font-size: var(--fs-display);
  font-weight: 600;
  font-style: italic;
  line-height: var(--lh-tight);
  color: var(--olive-d);
  letter-spacing: var(--ls-display);
}

.h-display-l {
  font-family: var(--font-serif);
  font-size: var(--fs-display-l);
  font-weight: 500;
  line-height: var(--lh-tight);
  color: var(--olive-d);
}

/* Body */
p, .p {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--ink);
  line-height: var(--lh-normal);
}

.lede {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--gray-1);
  line-height: 1.5;
}

.lede-sans {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--gray-1);
  max-width: 660px;
}

/* Eyebrows — uppercase tracked labels */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--terra);
}

.eyebrow-tracked {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow-l);
  color: var(--terra);
}

/* Meta + caption */
.meta {
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  color: var(--gray-1);
}

.caption {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  color: var(--gray-2);
}

/* Mono — alleen voor share-link-boxes */
code, .mono {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
}

/* Numerieke stat-cijfers in coach-strips */
.stat-num {
  font-family: var(--font-sans);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}