/* ==========================================================================
   MN Project Beweging — Design tokens
   Eén bron voor kleur, typografie, ruimte en beweging.
   Thema's (v1/v2/v3) overschrijven alleen de semantische laag.
   ========================================================================== */

/* ---------- Fonts (self-hosted, variabel) ---------- */
@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/montserrat-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/fraunces-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/fraunces-latin-wght-italic.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../assets/fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- 1. Merkpalet (uit de huidige site) ---------- */
  --c-espresso: #432812;      /* koppen, donkere vlakken */
  --c-walnoot: #735238;       /* accenttekst, lijnen, iconen */
  --c-zand: #F7EADF;          /* basisachtergrond */
  --c-linnen: #F2E2D4;        /* afwisselende sectie */
  --c-kurk: #E0CEBF;          /* randen, kaarten */
  --c-leisteen: #59615F;      /* bodytekst */
  --c-koraal: #D94F4F;        /* accent, highlights (decoratief / grote tekst) */
  --c-koraal-donker: #B23A3A; /* knoppen & kleine tekst: AA-contrast op wit en zand */
  --c-staal: #90ABBC;         /* secundair accent: rust, mentaal */
  --c-staal-licht: #DCE6EC;
  --c-wit: #FFFDFB;
  --c-inkt: #241509;          /* extra diep bruin voor overlays */

  /* ---------- 2. Semantische laag (thema's overschrijven deze) ---------- */
  --color-bg: var(--c-zand);
  --color-bg-alt: var(--c-linnen);
  --color-surface: var(--c-wit);
  --color-border: var(--c-kurk);
  --color-text: var(--c-leisteen);
  --color-text-strong: var(--c-espresso);
  --color-heading: var(--c-espresso);
  --color-muted: var(--c-walnoot);
  --color-accent: var(--c-koraal);
  --color-accent-2: var(--c-staal);
  --color-cta: var(--c-koraal-donker);
  --color-cta-hover: #962E2E;
  --color-cta-text: #FFFFFF;
  --color-dark: var(--c-espresso);
  --color-on-dark: var(--c-zand);
  --color-focus: var(--c-staal);

  /* ---------- 3. Typografie ---------- */
  --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Montserrat", system-ui, sans-serif;
  --font-accent: "Fraunces", Georgia, serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* Fluid schaal (320px → 1280px). Koppen blijven op mobiel compact. */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1:  clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --step-2:  clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem);
  --step-3:  clamp(1.6rem, 1.35rem + 1.2vw, 2.4rem);
  --step-4:  clamp(1.95rem, 1.5rem + 2.1vw, 3.3rem);
  --step-5:  clamp(2.3rem, 1.6rem + 3.4vw, 4.6rem);
  --step-6:  clamp(2.6rem, 1.6rem + 5vw, 6.2rem);

  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-body: 1.65;
  --tracking-tight: -0.02em;
  --tracking-wide: 0.14em;
  --measure: 65ch;

  /* ---------- 4. Ruimte (4/8-basis) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --section-y: clamp(3.5rem, 2.5rem + 5vw, 7.5rem);
  --gutter: clamp(1rem, 0.6rem + 2vw, 2rem);

  /* ---------- 5. Layout ---------- */
  --container: 74rem;
  --container-narrow: 46rem;
  --header-h: 4rem;

  /* ---------- 6. Vorm ---------- */
  --r-sm: 0.375rem;
  --r-md: 0.75rem;
  --r-lg: 1.5rem;
  --r-xl: 2.5rem;
  --r-pill: 999px;
  --border: 1px solid var(--color-border);

  --shadow-1: 0 1px 2px rgb(67 40 18 / 0.06), 0 4px 12px rgb(67 40 18 / 0.06);
  --shadow-2: 0 2px 6px rgb(67 40 18 / 0.08), 0 18px 40px rgb(67 40 18 / 0.12);

  /* ---------- 7. Beweging ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms;
  --dur-base: 280ms;
  --dur-slow: 700ms;

  /* ---------- 8. Interactie ---------- */
  --tap-min: 44px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}