/* msl-blocks foundation: box-sizing-reset + design tokens.
   De bron-sites zetten allemaal globaal border-box; de blocks zijn daarop gebouwd.
   Zonder deze regel loopt elke `width:100% + padding`-container rechts uit beeld (mobiel gevonden 2026-07-04). */
*, *::before, *::after { box-sizing: border-box; }

/* msl-blocks design tokens.
   Personalizer draait ALLEEN aan deze variabelen (+ content-slots), nooit aan block-structuur.
   Waardes hieronder = neutrale defaults; per klant overschreven in een site-eigen :root. */
:root {
  /* Brand (uit logo van de klant).
     Drie-kleuren-regel aangescherpt (Giu, template-review 2026-07-05): ÉÉN donkere
     kleur op de hele site — en die kleur IS het donkerste punt van het achtergrond-
     verloop (--c-dark-1 = --c-primary). Tekst, avatars, iconen en donkere vlakken
     zijn dus letterlijk dezelfde kleur; er bestaan geen twee blauwen naast elkaar.
     Personalizer-contract: de klant-logo-kleur wordt vóór invullen verdonkerd tot
     dit ink-niveau (donker genoeg als tekstkleur op wit); de accent blijft de
     onverdunde bedrijfskleur. */
  --c-primary: #162942;
  --c-primary-contrast: #ffffff;
  --c-accent: #e8a13a;
  --c-accent-contrast: var(--c-primary);

  /* Neutrals (wit + lichtgrijs = één achtergrond-familie) */
  --c-bg: #ffffff;
  --c-bg-alt: #f5f6f8;
  --c-text: var(--c-primary);
  --c-text-muted: color-mix(in srgb, var(--c-primary) 72%, white);
  --c-border: #e2e6ea;

  /* Donkere-vlak-familie (Giu, template-review 2026-07-05): álle donkere secties
     (hero-overlay, about-panel, location-panel, footer, mobiel nav-panel) putten uit
     dezelfde drie navy-stops — het kleurverloop van de hero is de referentie. Geen
     eigen zwart-mixen per block meer; near-black zonder primary-tint is verboden. */
  --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, niet per klant) */
  --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 */
  --radius: 10px;
  --radius-pill: 999px;
  /* Buttons: ALTIJD deze ronding (Giu, 2026-07-05: hero-button-look overal, nooit
     pill-vorm op tekst-buttons; ronde icon-knoppen zoals slider-pijlen en de
     WhatsApp-knop blijven cirkels). */
  --radius-btn: var(--radius);
  --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;
}