/* ==========================================================================
   Terapia Urbana NL — Design tokens
   Overwegend wit. Groen (uit het logo) alleen als accent. De beelden dragen
   de pagina; de UI blijft rustig en editorial.
   ========================================================================== */

/* ---- Self-hosted fonts -------------------------------------------------- */
@font-face { font-family:"Space Grotesk"; font-style:normal; font-weight:500; font-display:swap; src:url("../fonts/space-grotesk-500.woff2") format("woff2"); }
@font-face { font-family:"Space Grotesk"; font-style:normal; font-weight:700; font-display:swap; src:url("../fonts/space-grotesk-700.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap; src:url("../fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap; src:url("../fonts/inter-600.woff2") format("woff2"); }

:root {
  /* ---- Groen (logo) — accent ------------------------------------------ */
  --green-950:#182310;
  --green-900:#243318;
  --green-800:#33471f;
  --green-700:#425c28;
  --green-600:#557235;  /* tekst-accent op wit (AA) */
  --green-500:#6f9142;  /* interactief */
  --green-400:#8aa95e;  /* logo-groen */
  --green-300:#aec488;
  --green-200:#d2dfba;
  --green-100:#e9efdb;
  --green-50: #f4f7ec;

  /* ---- Neutralen (koel-wit) ------------------------------------------- */
  --ink-900:#14150f;
  --ink-800:#20221a;
  --ink-600:#4c4f44;
  --ink-500:#6b6e62;
  --ink-400:#9a9c90;
  --line:   #e7e7e1;
  --line-2: #d8d8d1;
  --white:  #ffffff;
  --off:    #f7f8f5; /* nauwelijks getint wit voor afwisseling */
  --ink-950:#0e0f0a;

  /* ---- Semantisch ----------------------------------------------------- */
  --bg:            var(--white);
  --surface:       var(--white);
  --surface-2:     var(--off);
  --text:          var(--ink-900);
  --text-muted:    var(--ink-500);
  --heading:       var(--ink-900);
  --accent:        var(--green-600);
  --accent-hover:  var(--green-700);
  --accent-ink:    var(--green-700);
  --on-accent:     #ffffff;
  --border:        var(--line);
  --border-strong: var(--line-2);
  --focus:         #2f6b1e;
  --danger:        #a3391f;

  /* ---- Typografie ----------------------------------------------------- */
  --font-display:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --step-0:  clamp(1rem, 0.97rem + 0.16vw, 1.09rem);
  --step-1:  clamp(1.15rem, 1.08rem + 0.34vw, 1.35rem);
  --step-2:  clamp(1.35rem, 1.22rem + 0.6vw, 1.75rem);
  --step-3:  clamp(1.6rem, 1.35rem + 1.15vw, 2.4rem);
  --step-4:  clamp(2rem, 1.6rem + 1.9vw, 3.1rem);
  --step-5:  clamp(2.3rem, 1.9rem + 2vw, 3.6rem);   /* H1 — beheerst */

  /* ---- Ruimte --------------------------------------------------------- */
  --space-2xs:.375rem; --space-xs:.625rem; --space-sm:1rem; --space-md:1.5rem;
  --space-lg:2.75rem; --space-xl:4.5rem; --space-2xl:clamp(6rem, 4rem + 9vw, 12rem);

  --measure:60ch;
  --container:1280px;
  --wide:1500px;
  --gutter:clamp(1.4rem, 0.8rem + 2.6vw, 2.75rem);

  --radius:6px; --radius-lg:12px;
  --focus-ring:0 0 0 3px #fff, 0 0 0 6px var(--focus);
  --shadow-sm:0 1px 2px rgba(20,21,15,.05), 0 4px 14px rgba(20,21,15,.05);
  --shadow-md:0 10px 30px rgba(20,21,15,.10), 0 30px 60px rgba(20,21,15,.10);
  --shadow-lg:0 20px 60px rgba(20,21,15,.16);

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:.6s;
}