/* msl-blocks foundation: box-sizing-reset + design tokens.
   Zahnarzt v1 — deze template zet de niche-register-waarden hier in :root
   (kleuren + soft radius), zodat de personalizer per klant alleen aan --c-primary/
   --c-accent hoeft te draaien (contract identiek aan dachdecker/v1). Basis = het
   care-register van physiotherapie/v1 (Poppins + DM Sans, zacht-afgerond), maar
   het palet is koeler/blauwer: dental = klinisch-schoon/hygiënisch. Gemeten scout +
   register-onderbouwing: research/scout-zahnarzt-2026-07-06.md + SOURCES.md.
   Fonts staan in site.css. */
*, *::before, *::after { box-sizing: border-box; }

:root {
  /* Brand (zahnarzt-muster-default; personalizer verdonkert klant-logo-kleur tot --c-primary,
     accent = onverdunde klant-kleur). Drie-kleuren-regel: één donkere kleur (petrol-teal)
     voor tekst én donkere panels, één accent (fris teal-cyan = "schone tand"/hygiëne).
     --c-dark-1 = --c-primary. Accent #34a6bd op --c-primary-tekst ~4,5:1 (AA). */
  --c-primary: #143641;
  --c-primary-contrast: #ffffff;
  --c-accent: #34a6bd;
  --c-accent-contrast: var(--c-primary);

  /* Neutrals (wit + koel-zacht grijs = één achtergrond-familie) */
  --c-bg: #ffffff;
  --c-bg-alt: #f1f5f6;
  --c-text: var(--c-primary);
  --c-text-muted: color-mix(in srgb, var(--c-primary) 66%, white);
  --c-border: #e2e8ea;

  /* Donkere-vlak-familie: álle donkere secties (hero-cta, feature-panel-panel, faq-support-
     card, reviews-donker, location-panel, footer, mobiel nav-panel) putten uit dezelfde drie
     petrol-stops. Geen block-eigen zwart-mixen. */
  --c-dark-1: var(--c-primary);
  --c-dark-2: color-mix(in srgb, var(--c-primary) 60%, black);
  --c-dark-3: color-mix(in srgb, var(--c-primary) 23%, black);

  /* Typography (per niche gekozen in site.css: Poppins + DM Sans) */
  --font-heading: "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --fs-h1: clamp(2rem, 5vw, 3.25rem);
  --fs-h2: clamp(1.5rem, 3.5vw, 2.25rem);
  --fs-body: 1.0625rem;

  /* Shape & depth — physio-register = zacht/afgerond (differentieert van dachdecker's
     eckige 10px). Buttons ietsje minder rond dan kaarten, maar altijd via --radius-btn. */
  --radius: 16px;
  --radius-pill: 999px;
  --radius-btn: 12px;
  --shadow-card: 0 4px 18px rgba(15, 23, 42, 0.08);
  --shadow-cta: 0 6px 20px rgba(15, 23, 42, 0.18);

  /* Spacing scale */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 160ms;
  --t-med: 280ms;
}