/* =====================================================
   Pro-Monty — Design Tokens
   April 2026 · v2.0
   Choice: Antraciet × Oranje · M·01 Monogram · Instrument Serif × Geist
   ===================================================== */

:root {
  /* ---------- Primary duo ---------- */
  --color-anthracite:    #1A2230;  /* Hoofdstructuur: header, tekst, zegels */
  --color-orange:        #EA6B2A;  /* Primaire actie: CTA, accent, highlights */

  /* ---------- Antraciet scale ---------- */
  --color-ink:           #11161C;  /* Diepste contrast, grote titels */
  --color-graphite:      #2A3544;  /* Body tekst, secundair */
  --color-muted:         #6A7380;  /* Subtekst, meta, placeholder */
  --color-muted-soft:    #8B94A1;  /* Disabled, hints */

  /* ---------- Oranje scale ---------- */
  --color-orange-deep:   #C9541B;  /* Hover / active CTA */
  --color-orange-soft:   #FBE5D4;  /* Badge backgrounds, tints */

  /* ---------- Neutrals (cool-warm) ---------- */
  --color-bone:          #F7F5F2;  /* Pagina-achtergrond, canvas */
  --color-fog:           #EDEAE5;  /* Alt kaart-achtergrond */
  --color-line:          #E2DED6;  /* Borders, dividers */
  --color-line-dark:     #D4CFC5;  /* Sterkere borders */

  /* ---------- Functional label colors (NOOIT structuur) ---------- */
  --color-fresh:         #2F6F4E;  /* Label: vers, goedgekeurd, GBP-veilig */
  --color-fresh-bg:      #E4EFE7;
  --color-amber:         #C68A2C;  /* Label: histamine, let op */
  --color-amber-bg:      #F3EFE8;
  --color-rose:          #B04A3E;  /* Label: restrictie, allergeen */
  --color-rose-bg:       #F1E4E2;

  /* ---------- Typography ---------- */
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-body:    'Geist', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Type scale */
  --fs-display:  clamp(56px, 7vw, 96px);
  --fs-h1:       clamp(40px, 5vw, 64px);
  --fs-h2:       clamp(28px, 3vw, 44px);
  --fs-h3:       22px;
  --fs-body-lg:  16px;
  --fs-body:     15px;
  --fs-small:    13px;
  --fs-label:    11px;

  --lh-tight:    0.95;
  --lh-snug:     1.2;
  --lh-normal:   1.55;

  --ls-tight:    -0.02em;
  --ls-normal:   0;
  --ls-label:    0.14em;
  --ls-caps:     0.20em;

  /* ---------- Spacing (4px grid) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-14: 56px;
  --space-16: 64px;
  --space-24: 96px;

  /* ---------- Radius ---------- */
  --radius-sm:   2px;    /* Kaarten, mockframes, paspoort */
  --radius-md:   6px;    /* Input velden */
  --radius-pill: 100px;  /* Knoppen, badges */

  /* ---------- Shadows ---------- */
  --shadow-sm: 0 1px 2px rgba(17,22,28,0.06), 0 1px 0 rgba(17,22,28,0.04);
  --shadow-md: 0 2px 6px rgba(17,22,28,0.06), 0 10px 30px -12px rgba(17,22,28,0.18);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 180ms;
  --duration-base: 220ms;
}