/* =========================================================
   Design tokens — Tandartspraktijk Vleuten (huidige huisstijl)
   Dit is het enige bestand dat je hoeft aan te passen voor
   kleuren, fonts en spacing.
   Kleuren = huisstijl tpvleuten.nl: greige #BFB9AA, zwart #000000, wit.
   Afgeleiden (lichtere greige, donkerdere greige) alleen voor contrast.
   ========================================================= */
:root {
  /* Kleuren */
  --ink: #000000;        /* zwart — donkere secties, tekst op licht */
  --navy: #000000;       /* header en footer (zelfde zwart; apart token voor als je het ooit wilt scheiden) */
  --paper: #FFFFFF;      /* wit — paginakleur */
  --mist: #E9E5DC;       /* greige op 40% — afwisselende secties, kaarten */
  --sage: #BFB9AA;       /* huisstijl-greige — accent op donker, lijnen, knoppen op donker */
  --moss: #78715F;
  --star: #FBBC04;       /* Google-geel, alleen voor reviewsterren */       /* donkere greige — accent op licht (labels, links), i.v.m. contrast */

  /* Afgeleiden (zelfde kleuren, andere dekking) */
  --ink-60: rgba(0, 0, 0, 0.62);
  --ink-30: rgba(0, 0, 0, 0.3);
  --ink-10: rgba(0, 0, 0, 0.08);
  --paper-60: rgba(255, 255, 255, 0.66);
  --paper-10: rgba(255, 255, 255, 0.08);
  --sage-30: rgba(191, 185, 170, 0.4);
  --sage-15: rgba(191, 185, 170, 0.18);

  /* Context-afhankelijk: licht = standaard, .dark overschrijft */
  --accent: var(--moss);
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);

  /* Typografie — Bodoni Moda (woordmerk/koppen), Cinzel (kapitalen op het doek), Libre Caslon (lopende tekst) */
  --font-head: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --font-body: "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --font-mono: "Cinzel", "Trajan Pro", Georgia, serif;

  --fs-h1: clamp(2.6rem, 6.5vw, 5.4rem);
  --fs-h2: clamp(1.9rem, 3.8vw, 3rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.5rem);
  --fs-lead: clamp(1.05rem, 1.4vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-label: 0.7rem;
  --fs-stat: clamp(2.4rem, 4.5vw, 3.6rem);

  --ls-head: 0.08em;
  --ls-mono: 0.14em;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 7rem;

  --section-y: clamp(4rem, 9vw, 7.5rem);
  --container: 1200px;
  --gutter: clamp(1rem, 4vw, 2.5rem);

  /* Vorm */
  --radius: 6px;
  --radius-sm: 4px;
  --radius-lg: 8px;
  --line: 1px solid var(--sage-30);

  /* Beweging */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.6s;
}
.dark { --accent: var(--sage); --btn-bg: var(--sage); --btn-fg: var(--ink); }