/* ==========================================================================
   Design System 2.0 — tokens
   Overgenomen uit ../Design System 2/…/tokens/*.css. Ongewijzigd, op één
   toevoeging na: de --t-* webschaal onderaan. Wijzig hier niets zonder het
   design system bij te werken.
   ========================================================================== */

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

:root{
  --font-sans:"Urbanist","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-display:"Urbanist","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  /* ---- Brand: Teal (rust of vertrouwen) ---- */
  --teal-50:#EEF6F8;
  --teal-100:#CFE2E9;   /* brand ice — de paginakleur */
  --teal-200:#A9CEDA;
  --teal-300:#74AEC0;
  --teal-400:#3E8A9F;
  --teal-500:#016273;   /* brand primary */
  --teal-600:#01515F;
  --teal-700:#01414C;
  --teal-800:#02323A;
  --teal-900:#062A3A;   /* ink navy — koppen & body */

  /* ---- Brand: Lime (signaal & actie) ---- */
  --lime-50:#F4FDE6;
  --lime-100:#E7FBC7;
  --lime-200:#D2F79B;
  --lime-300:#AAF149;   /* brand accent */
  --lime-400:#95DC33;
  --lime-500:#7CBB22;
  --lime-600:#5E9014;

  /* ---- Neutralen (koel, nooit puur grijs) ---- */
  --neutral-0:#FFFFFF;
  --neutral-50:#F7FAFA;
  --neutral-100:#EFF4F5;
  --neutral-200:#E1E9EB;
  --neutral-300:#C9D6DA;
  --neutral-400:#9DAFB5;
  --neutral-500:#748A91;
  --neutral-600:#55696F;
  --neutral-700:#3C4D53;
  --neutral-800:#25353A;
  --neutral-900:#101E23;

  /* ---- Semantische tinten ---- */
  --success-100:#DCF5E6;
  --success-500:#17A05A;
  --success-700:#0E6B3C;
  --warning-100:#FEF0D3;
  --warning-500:#E19100;
  --warning-700:#95600A;
  --danger-100:#FDE2E4;
  --danger-500:#D93440;   /* urgentie / spoed */
  --danger-700:#96222B;
  --info-100:#DCEBFA;
  --info-500:#2C7BD1;
  --info-700:#1B5290;

  /* ---- Oppervlakken ---- */
  /* De pagina is wit. Contrast komt van volvlakbanden, niet van de ondergrond.
     Design System 2.0 zet hier --teal-100 neer; dat geldt voor het portaal,
     waar content in kaarten ligt. Op de site werkt het niet. */
  --surface-page:var(--neutral-0);
  --surface-ice:var(--teal-100);
  --surface-page-alt:var(--neutral-50);
  --surface-card:var(--neutral-0);
  --surface-card-muted:var(--neutral-100);
  --surface-sunken:var(--neutral-100);
  --surface-inverse:var(--teal-500);
  --surface-inverse-deep:var(--teal-900);
  --surface-accent:var(--lime-300);
  --surface-accent-soft:var(--lime-100);
  --surface-overlay:rgba(6,42,58,.55);
  --surface-glass:rgba(255,255,255,.62);

  /* ---- Tekst ---- */
  --text-heading:var(--teal-900);
  --text-body:var(--neutral-700);
  --text-muted:var(--neutral-500);
  --text-subtle:var(--neutral-400);
  --text-on-inverse:#FFFFFF;
  --text-on-inverse-muted:rgba(255,255,255,.72);
  --text-on-accent:var(--teal-900);
  --text-link:var(--teal-500);
  --text-link-hover:var(--teal-700);
  --text-danger:var(--danger-700);
  --text-success:var(--success-700);

  /* ---- Randen ---- */
  --border-subtle:var(--neutral-200);
  --border-default:var(--neutral-300);
  --border-strong:var(--neutral-400);
  --border-inverse:rgba(255,255,255,.18);
  --border-focus:var(--teal-500);

  /* ---- Interactie ---- */
  --action-primary:var(--teal-500);
  --action-primary-hover:var(--teal-600);
  --action-primary-active:var(--teal-700);
  --action-accent:var(--lime-300);
  --action-accent-hover:var(--lime-400);
  --action-accent-active:var(--lime-500);
  --action-ghost-hover:var(--neutral-100);
  --focus-ring:0 0 0 3px rgba(1,98,115,.28);

  /* ---- Typografie ---- */
  --text-2xs:11px;
  --text-xs:12px;
  --text-sm:14px;
  --text-base:16px;
  --text-md:18px;
  --text-lg:20px;
  --text-xl:24px;
  --text-2xl:32px;
  --text-3xl:40px;
  --text-4xl:50px;
  --text-5xl:62px;
  --text-6xl:80px;

  --weight-light:300;
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --weight-extrabold:800;

  --leading-tight:1.05;
  --leading-snug:1.18;
  --leading-normal:1.35;
  --leading-relaxed:1.55;
  --leading-loose:1.7;

  --tracking-tighter:-0.03em;
  --tracking-tight:-0.015em;
  --tracking-normal:0;
  --tracking-wide:0.02em;
  --tracking-caps:0.08em;

  --type-display:var(--weight-semibold) var(--text-5xl)/var(--leading-tight) var(--font-display);
  --type-subheading:var(--weight-medium) var(--text-4xl)/var(--leading-snug) var(--font-display);
  --type-title:var(--weight-semibold) var(--text-2xl)/var(--leading-snug) var(--font-display);
  --type-section:var(--weight-semibold) var(--text-xl)/var(--leading-snug) var(--font-sans);
  --type-body:var(--weight-regular) var(--text-base)/var(--leading-relaxed) var(--font-sans);
  --type-body-lg:var(--weight-regular) var(--text-md)/var(--leading-relaxed) var(--font-sans);
  --type-label:var(--weight-semibold) var(--text-sm)/var(--leading-normal) var(--font-sans);
  --type-caption:var(--weight-regular) var(--text-xs)/var(--leading-normal) var(--font-sans);

  /* ---- Ruimte ---- */
  --space-1:4px;  --space-2:8px;   --space-3:12px;  --space-4:16px;
  --space-5:20px; --space-6:24px;  --space-8:32px;  --space-10:40px;
  --space-12:48px;--space-16:64px; --space-20:80px; --space-24:96px;
  --space-32:128px;

  --gutter-card:24px;
  --gutter-card-lg:32px;
  --gutter-section:96px;
  --page-max:1240px;
  --page-pad:32px;
  --control-h-sm:34px;
  --control-h-md:44px;
  --control-h-lg:54px;
  --header-h:92px;

  /* ---- Radii ---- */
  --radius-xs:6px;
  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:24px;
  --radius-xl:32px;
  --radius-2xl:40px;
  --radius-pill:999px;
  --radius-circle:50%;
  --radius-card:var(--radius-lg);
  --radius-card-inner:var(--radius-md);
  --radius-control:var(--radius-pill);
  --radius-field:var(--radius-sm);

  /* ---- Elevatie ---- */
  --shadow-xs:0 1px 2px rgba(6,42,58,.06);
  --shadow-sm:0 2px 8px rgba(6,42,58,.06);
  --shadow-md:0 8px 24px rgba(6,42,58,.08);
  --shadow-lg:0 18px 48px rgba(6,42,58,.10);
  --shadow-xl:0 32px 80px rgba(6,42,58,.14);
  --shadow-inset-hairline:inset 0 0 0 1px var(--border-subtle);
  --shadow-card:0 1px 2px rgba(6,42,58,.04),0 10px 30px rgba(6,42,58,.06);
  --shadow-card-hover:0 2px 4px rgba(6,42,58,.05),0 18px 44px rgba(6,42,58,.10);

  --blur-glass:blur(18px);
  --gradient-ice:linear-gradient(160deg,#FFFFFF 0%,#F1F7F8 48%,#E7F2F1 100%);
  --gradient-teal:linear-gradient(150deg,#01717F 0%,#016273 55%,#02323A 100%);
  --gradient-lime-fade:linear-gradient(120deg,rgba(170,241,73,.22) 0%,rgba(170,241,73,0) 62%);
  --gradient-protect:linear-gradient(to top,rgba(6,42,58,.72) 0%,rgba(6,42,58,0) 70%);

  /* ---- Motion ---- */
  --dur-instant:80ms;
  --dur-fast:140ms;
  --dur-base:220ms;
  --dur-slow:360ms;
  --dur-slower:600ms;
  --ease-standard:cubic-bezier(.2,.7,.3,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in:cubic-bezier(.5,0,.9,.3);
  --ease-soft-spring:cubic-bezier(.34,1.28,.64,1);
  --transition-control:background-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard);
  --transition-surface:box-shadow var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard);

  /* ==== Webschaal ====================================================
     De DS-schaal loopt tot 80px; dat is voor slides en appschermen. Op
     een pagina met lopende tekst is 62px het plafond. Deze --t-* waarden
     schalen vloeiend mee en zijn de enige typemaat die de site gebruikt.
     ================================================================== */
  --t-display:clamp(34px,5.4vw,68px);
  --t-h2:clamp(27px,3.6vw,46px);
  --t-h3:clamp(19px,1.6vw,22px);
  --t-h4:clamp(17px,1.5vw,19px);
  --t-lede:clamp(17px,1.4vw,19px);
  --t-num:clamp(38px,5vw,64px);
  --t-num-sm:clamp(34px,4.4vw,56px);
}