/* 2. Tokens & thema's ------------------------------------------------------ */
:root {
  /* Vaste kleuren */
  --c-page: #f5f7f6;
  --c-tint: #e6efec;
  --c-dark: #202020;          /* basis huidige site */
  --c-dark-deep: #171818;
  --c-accent: #0aabab;        /* één ankerkleur voor alle acties */
  --c-accent-hover: #2cc6c2;
  --c-on-accent: #071a1a;
  --c-mint: #96cfbd;          /* logo */
  --c-sea: #008d92;           /* logo */
  --c-sky: #83d0f5;           /* druppel */
  --c-blue: #396ab2;          /* druppel */
  --c-foam: #eaf6fb;
  --c-error: #b42318;

  /* Thematokens — licht (standaard) */
  --c-bg: var(--c-page);
  --c-surface: #ffffff;
  --c-line: rgb(32 32 32 / 0.12);
  --c-line-strong: rgb(32 32 32 / 0.26);
  --c-fill: rgb(32 32 32 / 0.035);
  --c-text: #1d1f1f;
  --c-text-muted: #4b5553;
  --c-text-faint: #5f6968;
  --c-em: #00777b;
  --c-accent-ink: #00777b;
  --c-focus: #00777b;
  --c-glass: rgb(255 255 255 / 0.84);
  --c-shadow: rgb(15 45 45 / 0.28);
  --c-ph: #00777b;
  --c-ph-bg: rgb(0 119 123 / 0.08);

  /* Typografie */
  --f-display: "Reckless", "Fraunces", Georgia, serif;
  --f-body: "Matter", "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-h1: clamp(2.6rem, 1.5rem + 4vw, 5.25rem);
  --fs-h2: clamp(2.1rem, 1.4rem + 3vw, 4.1rem);
  --fs-h3: clamp(1.3rem, 1.15rem + 0.7vw, 1.75rem);

  /* Ruimte & vorm */
  --gutter: clamp(1rem, 0.5rem + 2.6vw, 3rem);
  --maxw: 1320px;
  --section-y: clamp(4.5rem, 3rem + 7vw, 9.5rem);
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 32px;
  --r-xl: clamp(28px, 2vw + 16px, 48px);
  --r-pill: 999px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-water: cubic-bezier(0.65, 0, 0.35, 1);
  --header-h: 88px;
  --mobile-cta-h: 0px;
}

.theme-dark {
  --c-bg: var(--c-dark);
  --c-surface: #282a2a;
  --c-line: rgb(255 255 255 / 0.12);
  --c-line-strong: rgb(255 255 255 / 0.28);
  --c-fill: rgb(255 255 255 / 0.04);
  --c-text: #f3f6f5;
  --c-text-muted: #b9c2c0;
  --c-text-faint: #949e9c;
  --c-em: var(--c-mint);
  --c-accent-ink: #2cc6c2;
  --c-focus: var(--c-accent);
  --c-glass: rgb(23 24 24 / 0.84);
  --c-shadow: rgb(0 0 0 / 0.6);
  --c-ph: #2cc6c2;
  --c-ph-bg: rgb(10 171 171 / 0.12);
  background: var(--c-bg);
  color: var(--c-text);
}