/* ============================================================
   tokens.css — Design tokens voor Dagmeester (dark editorial)
   Donkere marineblauwe basis, champagne-goud accent, crème tekst.
   Koppen: Cormorant Garamond (chique). Tekst: Aptos.
   ============================================================ */

:root {
  /* Laat de browser weten dat dit ontwerp licht én donker aankan */
  color-scheme: dark light;

  /* --- Kernkleuren --- */
  --navy:        #131b2e;  /* basis-achtergrond (donker) */
  --navy-deep:   #0e1422;  /* nog dieper: strips, footer */
  --cream:       #f4efe6;  /* crème: tekst op donker + lichte secties */
  --gold:        #d8b66a;  /* champagne-goud accent */
  --gold-deep:   #b89240;  /* dieper goud (illustraties op crème) */
  --gold-on-cream: #9a7c33; /* goud-tekst op crème achtergrond */

  /* --- Tekstkleuren --- */
  --ink:         #1c2433;  /* donkere tekst op crème secties */
  --ink-muted:   #45464d;  /* gedempte tekst op crème */
  --cream-muted: #b9c2d6;  /* gedempte tekst op donker */
  --cream-faint: #9aa6bd;  /* nog zachtere tekst op donker (contrastvast) */

  /* --- Doorzichtige gouden lijntjes --- */
  --gold-faint:  rgba(216, 182, 106, 0.22);
  --gold-line:   rgba(216, 182, 106, 0.45);

  /* --- Koppeling naar generieke namen (gebruikt in base.css) --- */
  --color-surface: var(--navy);
  --color-text:    var(--cream);

  /* --- Lettertypes --- */
  /* Koppen: Cormorant Garamond (chique serif). Tekst: Hanken Grotesk
     (warme, eigentijdse sans die mooi bij de serif past). */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  /* --- Typografieschaal --- */
  --fs-display: clamp(38px, 6vw, 60px);  /* hero-kop */
  --fs-h2:      clamp(26px, 4vw, 38px);  /* sectietitels */
  --fs-h3:      21px;                    /* subkoppen */
  --fs-quote:   clamp(20px, 3vw, 26px);  /* citaten */
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-small:   13px;
  --fs-label:   11px;

  /* --- Letterspatie & lijnhoogte --- */
  --ls-label:   0.22em;   /* labels: ruim (high-end) */
  --ls-brand:   0.14em;   /* woordmerk */
  --lh-tight:   1.1;
  --lh-normal:  1.7;

  /* --- Ruimte (8px-schaal) --- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-12: 96px;
  --space-15: 120px;

  /* --- Layout --- */
  --container-max:  1140px;
  --margin-page:    64px;
  --margin-page-sm: 22px;
  --gutter:         24px;  /* tussenruimte in rasters (o.a. fotogalerij) */

  /* --- Vormgeving --- */
  --radius:      4px;
  --radius-full: 9999px;
  --shadow-soft: 0 24px 50px -20px rgba(0, 0, 0, 0.55);

  /* --- Overgangen --- */
  --transition:      0.3s ease;
  --transition-slow: 0.5s ease;
}

/* ============================================================
   Donkere modus
   De site is al donker. Dit blok zorgt dat de crème secties
   óók comfortabel blijven wanneer het systeem op donker staat:
   we maken ze net iets warmer/donkerder zodat het niet verblindt.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --cream:     #ece6da;
    --shadow-soft: 0 24px 50px -20px rgba(0, 0, 0, 0.75);
  }
}