/* Titles + UI text: Oswald Medium 500 (Google Fonts). Running body copy: Barlow (Google Fonts) — wider, same grotesque DNA. */

:root{
/* Sluier-basis (geen merkkleur): diep violet voor witte tekst op elementen. Oude namen blijven als alias zodat niets breekt. */
--ss-veil:#34008C;/* @kind color */
--ss-paars:var(--ss-violet);--ss-paars-700:var(--ss-veil);--ss-paars-100:#FFFFFF;
--ss-roze:var(--ss-hotpink);--ss-roze-700:var(--ss-ink);--ss-roze-100:#FFFFFF;
--ss-turquoise:var(--ss-mint);--ss-turquoise-700:var(--ss-ink);--ss-turquoise-100:#FFFFFF;
/* BRAND COLOURS = het spectrum (uit BG-SafeSpace) */
--ss-hotpink:#FF42B6;--ss-oranje:#FDA22E;--ss-geel:#FFEE00;
--ss-violet:#8756FF;--ss-lila:#F3B6FB;--ss-mint:#66FFD3;--ss-cyaan:#04FFFD;--ss-hemel:#7EDCF2;--ss-limoen:#C6F45E;
/* Neutrals — maar twee: bijna-zwart en wit. Grijzen alleen nog als technische randen (niet voor tekst). */
--ss-ink:#2E2E2D;/* bijna-zwart: de enige tekstkleur naast wit */--ss-white:#FFFFFF;
--ss-grey-800:var(--ss-ink);--ss-grey-600:var(--ss-ink);--ss-grey-400:rgba(46,46,45,.4);/* @kind color */--ss-grey-200:rgba(46,46,45,.14);/* @kind color */--ss-grey-100:rgba(46,46,45,.07);/* @kind color */--ss-grey-50:#FFFFFF;
/* Semantic — alleen zwart en wit, plus twee signalen en één waarschuwing. */
--ss-zachtroze:#FFC2E2;/* @kind color */ /* zacht roze: signaal "Vol" */
--text-body:var(--ss-ink);--text-on-color:var(--ss-white);
--surface-page:var(--ss-white);--surface-card:var(--ss-white);--surface-inverse:var(--ss-ink);
--veil-light:rgba(255,255,255,.55);/* @kind color */ /* witte sluier voor ink-tekst op elementen */
--border-subtle:var(--ss-grey-200);--border-strong:var(--ss-ink);
--action-primary:var(--ss-ink);--action-primary-fg:var(--ss-white);--action-hover:transparent;/* gevuld ↔ outline */
--action-on-color:var(--ss-white);
--focus-ring:var(--ss-ink);
--signal-plekken:var(--ss-geel);--signal-vol:var(--ss-zachtroze);
--status-warning:var(--ss-hotpink);
}

:root{
--font-display:"Oswald","Arial Narrow",sans-serif;/* titles — UPPERCASE only for real titles (h1–h3) */
--font-ui:"Barlow",system-ui,sans-serif;/* alle overige tekst (meta, labels, links) — Barlow, zinsvorm */
--font-pill:"Oswald","Arial Narrow",sans-serif;/* tekst in outline/pil (labels, tags, prijs, voornaamwoorden) — Oswald Medium KAPITALEN */
--font-nav:"Oswald","Arial Narrow",sans-serif;/* menubalk — Oswald Medium KAPITALEN */
--font-body:"Barlow",system-ui,sans-serif;/* running body copy */
--font-button:"Oswald","Arial Narrow",sans-serif;/* knoppen: Oswald Medium, KAPITALEN */
--font-eyebrow:"Barlow",system-ui,sans-serif;/* kleine regel boven een titel */
--fs-mega:clamp(56px,8.5vw,120px);/* @kind font */--fs-h1:56px;--fs-h2:40px;--fs-h3:26px;--fs-h4:20px;
--fs-lead:21px;--fs-body:18px;--fs-small:15px;--fs-micro:13px;
--lh-display:1.0;/* @kind font */--lh-heading:1.05;/* @kind font */--lh-body:1.45;/* @kind font */
--ls-display:0;/* @kind font */--ls-eyebrow:0;/* @kind font */ /* never letter-space small text */
--fw-display:500;/* @kind font */ /* Oswald Medium */
--fw-ui:500;/* @kind font */--fw-button:500;/* @kind font */--fw-eyebrow:500;/* @kind font */
--fw-body:400;/* @kind font */--fw-medium:500;/* @kind font */--fw-semibold:600;/* @kind font */--fw-bold:700;/* @kind font */
/* Semantic */
--type-display:500 var(--fs-h1)/var(--lh-display) var(--font-display);/* @kind font */
--type-heading:500 var(--fs-h3)/var(--lh-heading) var(--font-display);/* @kind font */
--type-ui:500 16px/1.3 var(--font-ui);/* @kind font */
--type-body:400 var(--fs-body)/var(--lh-body) var(--font-body);/* @kind font */
}

:root{
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;
--container-max:1200px;/* @kind spacing */--gutter:24px;/* @kind spacing */
--radius-xs:4px;--radius-sm:8px;--radius-md:14px;--radius-lg:24px;--radius-xl:40px;--radius-pill:999px;--radius-round:50%;
--border-width:2px;/* @kind spacing */
--shadow-sm:0 2px 8px rgba(46,46,45,.08);
--shadow-md:0 12px 32px rgba(46,46,45,.12);
--shadow-lg:0 24px 56px rgba(46,46,45,.18);
--ease-out:cubic-bezier(.2,.8,.2,1);/* @kind other */--ease-bounce:cubic-bezier(.34,1.56,.64,1);/* @kind other */
--dur-fast:140ms;/* @kind other */--dur-base:240ms;/* @kind other */--dur-slow:480ms;/* @kind other */
}