@font-face {
  font-family: "Inter";
  src: url("../fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #FAF8F3;
  --surface: #FFFFFF;
  --aubergine: #302137;
  --pistache: #D5E3BF;
  --lavendel: #D9CCE5;
  --text-heading: #302137;
  --text-body: #514457;
  --text-muted: #625568;
  --line: #DDD5DF;
  --line-on-lavendel: #C5B8D0;
  --control-border: #8C7B96;
  --aubergine-hover: #46314F;
  --aubergine-night: #1E1324;
  --font-heading: "Inter", sans-serif;
  --font-body: "Inter", sans-serif;
  --heading-weight: 800;
  --body-weight: 400;
  --ui-weight: 500;
  --button-weight: 600;
  --h1-size: clamp(2.75rem, 6.5vw, 5.5rem);
  --h1-line-height: 1;
  --h1-tracking: -0.045em;
  --body-size: 1.125rem;
  --body-line-height: 1.55;
  --body-tracking: 0em;
  --radius-button: 9999px;
  --radius-input: 16px;
  --radius-card: 24px;
  --radius-panel: 48px;
  --radius-panel-mobile: 28px;
  --shadow-card: 0 4px 12px rgb(48 33 55 / 4%), 0 18px 48px -12px rgb(48 33 55 / 14%);
  --shadow-floating: 0 8px 20px -6px rgb(48 33 55 / 8%), 0 28px 64px -16px rgb(48 33 55 / 18%);

  /* ── aanvullingen voor de bouw ───────────────────────────────────── */
  --pistache-licht: #E6EFD9;
  --pistache-diep: #BACC9D;
  --lavendel-licht: #EAE2F1;
  --lavendel-overgang: #EDE6EF;
  --lavendel-accent: #9B86AE;   /* tweede regel in de FAQ-kop */
  /* De vier kaarten van het scrollverhaal op de scanpagina. Perzik en
     poederblauw zijn hier nieuw in het palet; tekst en knoppen blijven
     overal aubergine, zodat het herkenbaar Brandigator blijft. */
  --kaart-profiel: #D9CCE5;
  --kaart-maps: #D5E3BF;
  --kaart-reviews: #F7D9C7;
  --kaart-ai: #D4E9EF;
  --radius-kaart-groot: 38px;   /* de stapelkaarten */
  --radius-kaart-beeld: 30px;
  --shadow-kaart: 0 20px 44px rgb(48 33 55 / 10%);
  --aubergine-zacht: rgb(48 33 55 / 8%);
  --bg-doorschijnend: rgb(250 248 243 / 90%);
  --aubergine-lijn: rgb(48 33 55 / 12%);
  --nacht-lijn: rgb(255 255 255 / 14%);
  --nacht-tekst: #CFC3D6;

  /* ── statuskleuren en overlays ───────────────────────────────────── */
  --waarschuwing: #7A5B1E;
  --fout: #A12A34;
  --label-op-lavendel: #6B5A77;
  --label-ai: #6B4E8A;
  --label-op-creme: #6B5A77;
  --tekst-op-pistache: #4A5B36;
  --marker-pistache: #5E7340;
  --tekst-op-wit-zacht: #4A3B55;
  /* merkkleuren van derden, voor de nagebouwde Google-interface */
  --google-blauw: #4285F4;
  --google-rood: #EA4335;
  --google-groen: #34A853;
  --google-geel: #FBBC05;
  --google-link: #1A4FBF;
  /* licht genoeg om de pagina erachter te laten zien, donker genoeg
     om het venster eruit te laten springen */
  --scrim: rgb(48 33 55 / 20%);
  --scrim-blur: 6px;
  /* glaspaneel: de pagina blijft er zacht doorheen zichtbaar */
  --glas: rgb(255 255 255 / 82%);
  --glas-rand: rgb(255 255 255 / 70%);
  --glas-blur: 28px;
  --radius-dialoog: 32px;
  --shadow-dialoog: 0 24px 80px -16px rgb(30 19 36 / 38%);
  --z-banner: 300;
  --z-dialoog: 400;

  --h2-size: clamp(2rem, 3.6vw, 3.1rem);
  --h3-size: clamp(1.25rem, 1.7vw, 1.6rem);
  --lede-size: clamp(1.125rem, 1.35vw, 1.375rem);
  --small-size: 0.9375rem;
  --label-size: 0.75rem;
  --label-tracking: 0.14em;

  --s4: 4px;  --s8: 8px;   --s12: 12px; --s16: 16px; --s20: 20px;
  --s24: 24px; --s32: 32px; --s40: 40px; --s56: 56px; --s80: 80px;
  --block: clamp(72px, 8vw, 128px);
  --gutter: 20px;
  --wrap: 1240px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --t-fast: 160ms;
  --t-mid: 320ms;
}
@media (min-width: 768px)  { :root { --gutter: 36px; } }
@media (min-width: 1200px) { :root { --gutter: 56px; } }