/* ============================================================
   MAITRE MEDIA — Design Tokens (v1, juni 2026)
   Single source of truth. Import dit bestand en gebruik var(--mm-*).
   Concept: "Mastery" — Maître (meester) + dubbele-M kroon (autoriteit).
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=Fraunces:ital,opsz,wght@1,9..144,300;1,9..144,400&display=swap");

:root{
  /* ---- KLEUR: basis (donker) ---- */
  --mm-page:#070C1C;        /* diepste achtergrond */
  --mm-ink:#0A1430;         /* hero/secties basis */
  --mm-navy:#10224F;        /* vlakken, cards, diepte */
  --mm-card:#121A33;        /* card-vlak */
  --mm-line:rgba(255,255,255,0.10);

  /* ---- KLEUR: tekst ---- */
  --mm-text:#EDEFF3;        /* primaire tekst op donker */
  --mm-muted:rgba(237,239,243,0.50);

  /* ---- KLEUR: accent (Spring Mint) ---- */
  --mm-accent:#9EE89D;
  --mm-accent-ink:#06251A;  /* tekst óp het accent */
  --mm-accent-soft:rgba(158,232,157,0.14);

  /* ---- TYPOGRAFIE ---- */
  --mm-font-display:'Manrope', sans-serif;     /* koppen */
  --mm-font-accent:'Fraunces', serif;          /* italic accent-woord, bv. "mastered." */
  --mm-font-body:'Inter', sans-serif;          /* broodtekst, labels, UI */

  --mm-h1:clamp(40px,6vw,68px);
  --mm-h2:clamp(28px,3.4vw,40px);
  --mm-h3:20px;
  --mm-body:16px;
  --mm-small:13px;
  --mm-label:11px;          /* uppercase labels, letter-spacing 0.16em */

  --mm-weight-display:800;
  --mm-weight-accent:300;   /* Fraunces light italic */

  /* ---- RADIUS ---- */
  --mm-r-sm:7px;
  --mm-r-md:12px;
  --mm-r-lg:16px;
  --mm-r-pill:999px;

  /* ---- SPACING (8pt) ---- */
  --mm-s-1:8px; --mm-s-2:16px; --mm-s-3:24px; --mm-s-4:32px;
  --mm-s-5:48px; --mm-s-6:64px; --mm-s-8:96px;

  /* ---- ELEVATIE ---- */
  --mm-shadow:0 20px 60px rgba(0,0,0,0.45);

  /* ---- LETTER-SPACING ---- */
  --mm-ls-tight:-0.04em;    /* grote display koppen */
  --mm-ls-label:0.16em;     /* uppercase labels */
}

/* Helper base — optioneel: zet body meteen goed */
.mm-root{
  background:var(--mm-page);
  color:var(--mm-text);
  font-family:var(--mm-font-body);
  -webkit-font-smoothing:antialiased;
}