/* McFly & Brown — design tokens
   Bron: brochure (sep 2025, 12 pagina's, gemeten op de ingesloten beelden) en mcflybrown.com (gescand 15 okt 2026).
   Brochure = donkere wereld (navy → groen). Website = lichte wereld (wit, zwarte tekst, oranje accent). */

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400&display=swap");

:root {
  /* Kern */
  --mb-navy: #21234A;          /* brochure-achtergrond, linksboven in de gradient */
  --mb-navy-deep: #1B1D3F;     /* donkerste vlak, kaarten op navy */
  --mb-navy-mid: #253954;      /* midden van de gradient */
  --mb-teal: #2A4B5E;          /* overgang navy → groen */
  --mb-green: #6BB566;         /* rechtsonder in de brochure-gradient */
  --mb-orange: #DF7613;        /* brochure: smile, bullets, nummers. Site: #E07614 */
  --mb-orange-hover: #C96A10;
  --mb-blue: #007BB1;          /* blauwe smile + bovenste blad van het logo */
  --mb-blue-deep: #0B6693;
  --mb-cta: #03BF7D;           /* website: knoppen "Plan een gesprek", "Search" */
  --mb-cta-hover: #02A86E;

  /* Lichte wereld (website) */
  --mb-ink: #0C0C0C;           /* koppen en lopende tekst op wit */
  --mb-ink-soft: #303030;
  --mb-muted: #5F6369;
  --mb-line: #E3E5EA;
  --mb-paper: #FFFFFF;
  --mb-paper-alt: #F2F3F5;
  --mb-white-soft: #F1F2F4;    /* "wit" in het logo */

  /* Gradients */
  --mb-gradient: linear-gradient(125deg, #21234A 0%, #22274D 38%, #2A4B5E 68%, #45836A 86%, #6BB566 100%);
  --mb-gradient-flat: linear-gradient(160deg, #21234A 0%, #253954 60%, #2D5A60 100%);

  /* Typografie: Poppins overal */
  --mb-font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mb-h1: clamp(2.2rem, 5.4vw, 4.4rem);   /* site: 45.8px / 600 ; brochure-titels: 700 */
  --mb-h2: clamp(1.7rem, 3.6vw, 2.6rem);   /* site: 36.6px / 600 */
  --mb-h3: clamp(1.15rem, 1.8vw, 1.4rem);
  --mb-body: 1rem;                          /* site: 15px / 400 / 1.62 */
  --mb-small: .875rem;
  --mb-lh: 1.62;
  --mb-w-head: 700;
  --mb-w-sub: 600;

  /* Vorm */
  --mb-radius: 5px;            /* site: knoppen en kaarten */
  --mb-radius-lg: 14px;
  --mb-shadow: 0 5px 8px rgba(0,0,0,.10);
  --mb-shadow-lg: 0 24px 60px -20px rgba(17,19,48,.45);

  /* Motion */
  --mb-ease: cubic-bezier(.22,1,.36,1);    /* uitglijden, nooit stuiteren */
  --mb-ease-in-out: cubic-bezier(.65,0,.35,1);
  --mb-dur: .7s;
}