/* ============================================================
   P.G.C. HAJENIUS — Design Tokens
   1826 — 2026
   Import this file BEFORE styles.css.
   ============================================================ */

:root {
  /* ---------- Kleur ---------- */
  --rood-diep:      #8B1A1A;   /* primair sectievlak */
  --rood-donker:    #5C0F0F;   /* hover, footer, nacht */
  --rood-helder:    #B82828;   /* accent, focus-ring */
  --goud-warm:      #C9A05C;   /* primaire tekst op rood, wapen, lijnen */
  --goud-licht:     #E5C16E;   /* highlights, hover op goud */
  --creme:          #F4ECDC;   /* zachte achtergrond, body-bg */
  --inkt:           #1A1410;   /* body-tekst op licht */
  --zwart-warm:     #0E0907;   /* foto-onderlaag, modal-scrim */
  --grijs-licht:    #E8E0D0;   /* rule-lines, kaart-borders op crème */
  --grijs-warm:     #6B5D4F;   /* micro-copy, captions */
  --betaal-grijs:   #9A9A9A;   /* payment-logos monochroom */

  /* ---------- Typografie — Family ---------- */
  --font-display:   'Cormorant Garamond', 'Cormorant', Georgia, serif;
  --font-serif:     'Cormorant', 'Cormorant Garamond', Georgia, serif;
  --font-sc:        'Cormorant SC', 'Cormorant Garamond', Georgia, serif;
  --font-sans:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* ---------- Typografie — Trap (desktop / mobile) ---------- */
  --fs-h1-d:        72px;
  --fs-h1-m:        56px;
  --fs-h2-d:        48px;
  --fs-h2-m:        40px;
  --fs-h3-d:        32px;
  --fs-h3-m:        28px;
  --fs-body-d:      18px;
  --fs-body-m:      16px;
  --fs-micro:       13px;
  --fs-eyebrow:     12px;

  --lh-tight:       1.05;
  --lh-display:     1.15;
  --lh-body:        1.55;
  --lh-loose:       1.7;

  --ls-display:     -0.01em;
  --ls-sc:          0.18em;
  --ls-eyebrow:     0.24em;

  /* ---------- Spacing ---------- */
  --section-py-d:   96px;
  --section-py-m:   56px;
  --container-max:  1280px;
  --gutter:         32px;
  --gutter-m:       20px;

  --space-1:        4px;
  --space-2:        8px;
  --space-3:        12px;
  --space-4:        16px;
  --space-5:        24px;
  --space-6:        32px;
  --space-7:        48px;
  --space-8:        64px;
  --space-9:        96px;

  /* ---------- Radius ---------- */
  --radius:         2px;
  --radius-lg:      6px;
  --radius-pill:    999px;

  /* ---------- Shadow ---------- */
  --shadow-card:    0 1px 2px rgba(14, 9, 7, .06), 0 8px 24px rgba(14, 9, 7, .08);
  --shadow-hover:   0 2px 4px rgba(14, 9, 7, .08), 0 16px 36px rgba(14, 9, 7, .12);
  --shadow-inset:   inset 0 1px 0 rgba(201, 160, 92, .12);

  /* ---------- Borders ---------- */
  --border-fine:    1px solid var(--grijs-licht);
  --border-goud:    1px solid var(--goud-warm);
  --border-goud-2:  2px solid var(--goud-warm);

  /* ---------- Motion ---------- */
  --ease-out:       cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:         150ms;
  --t-med:          250ms;
  --t-slow:         450ms;

  /* ---------- Layout primitives ---------- */
  --topbar-h:       64px;
  --topbar-h-m:     56px;
  --z-topbar:       100;
  --z-modal:        200;
  --z-toast:        300;
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-med:  0ms;
    --t-slow: 0ms;
  }
}

/* ============================================================
   Utility: wapen color anchor
   Voor <svg> die fill="currentColor" gebruikt — zet kleur via parent.
   ============================================================ */
.svg-wapen        { color: var(--goud-warm); display: inline-block; }
.svg-wapen--light { color: var(--goud-licht); }
.svg-wapen--rood  { color: var(--rood-diep); }