/* ==========================================================================
   Marlee Hair — design tokens (briefing §3)
   --mh-magenta gecolorpickt op het IG-logo (mediaan #C85494): #C8438E blijft
   de merkkleur; vervang zodra het vectorlogo binnen is.  VERIFIEER
   ========================================================================== */

@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("../fonts/cinzel-500-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/manrope-400-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Basis */
  --mh-blush:      #FFF3F6;
  --mh-white:      #FFFFFF;
  --mh-ink:        #2B1026;
  --mh-muted:      #6E5667;

  /* Merk */
  --mh-magenta:    #C8438E;
  --mh-deep:       #9E2A6E;
  --mh-pink:       #F7C6DB;
  --mh-pink-soft:  #FCE4EE;
  --mh-coral:      #F2877F;
  --mh-gloss:      linear-gradient(120deg, #F7C6DB 0%, #C8438E 45%, #9E2A6E 100%);
  --mh-line:       rgba(43, 16, 38, .12);

  /* Vorm */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --shadow-soft: 0 2px 12px rgba(43, 16, 38, .08);
  --shadow-lift: 0 12px 32px rgba(158, 42, 110, .18);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --dur: 250ms;

  /* Typografie */
  --font-display: "Instrument Serif", "Times New Roman", Georgia, serif;
  --font-mark: "Cinzel", "Trajan Pro", Georgia, serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-display: clamp(3.5rem, 1.9rem + 7.2vw, 8rem);      /* 56 → 128 */
  --fs-h2: clamp(2.5rem, 1.7rem + 3.6vw, 4.5rem);          /* 40 → 72 */
  --fs-h3: clamp(1.375rem, 1.25rem + .5vw, 1.75rem);       /* 22 → 28 */
  --fs-body: clamp(1.0625rem, 1.03rem + .15vw, 1.125rem);  /* 17 → 18 */
  --fs-small: .9375rem;
  --fs-eyebrow: clamp(.75rem, .73rem + .1vw, .8125rem);    /* 12 → 13 */

  /* 8px-grid */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-5: 40px; --s-6: 48px; --s-8: 64px; --s-10: 80px;
  --s-12: 96px; --s-16: 128px;
  --section: clamp(80px, 5rem + 5vw, 160px);

  --container: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --nav-h: 72px;
}