/* WP-Start designsysteem: gedeelde tokens. Alle componenten verwijzen hiernaar (container, 8px-spatiëring, typografie, vormen). */
:root{
  --wp-container:1360px;
  --wp-gutter:clamp(16px,2.4vw,40px);
  --s-1:8px;--s-2:16px;--s-3:24px;--s-4:32px;--s-6:48px;--s-8:64px;
  --sec-y:64px;
  --fs-h1:clamp(2.25rem,1.2rem + 3.4vw,3.5rem);
  --fs-h2:clamp(1.75rem,1.1rem + 2.2vw,2.75rem);
  --fs-h3:clamp(1.25rem,1rem + .9vw,1.5rem);
  --fs-body:1rem;--fs-small:.875rem;--fs-min:.8125rem;
  --lh-head:1.1;--lh-body:1.6;--measure:68ch;
  --r-card:24px;--r-ctrl:16px;--r-pill:999px;
  --fw-body:500;--fw-strong:600;--fw-label:700;
  --t-primary:#F5F8FF;--t-desc:#E5EDFA;--t-sec:#C9D6E8;
  --glow-soft:0 0 14px rgba(0,210,255,.1);
  --c-navy:#050d24;--c-card:#0a1636;--c-blue:#2b7bff;--c-cyan:#00d2ff;--c-gold:#e5b94c;--c-line:rgba(120,160,255,.2);
  --shadow-card:0 18px 48px rgba(0,0,0,.45);--shadow-glow:0 0 0 1px rgba(0,210,255,.4),0 0 28px rgba(0,210,255,.22);
}
@media(max-width:700px){:root{--wp-gutter:16px;--sec-y:48px}}
/* leesbare regelbreedte voor lopende tekst */
.wpstart-article p,.wph-about p,.ws-legal p{max-width:var(--measure)}
/* geen gedeformeerde afbeeldingen */
img{max-width:100%;height:auto}
/* formulieren: nooit kleiner dan 16px (voorkomt zoomen op mobiel) */
input,select,textarea{font-size:max(1rem,16px)}
/* leesbaarheid: stevigere basistekst en duidelijke labels (koppen houden hun eigen gewicht) */
body{font-weight:var(--fw-body)}
strong,b{font-weight:700}
label,button,.ws-btn,.wpstart-button{font-weight:var(--fw-label)}

/* Kleursysteem homepage (alleen nieuwe --ws-* tokens; geen bestaande variabelen gewijzigd).
   Merkkleuren komen uit het logo: blauw #003FDE > #0878F8 > cyaan #08D0F8, plus wit. */
:root{
  /* merk (logo) */
  --ws-logo-navy:#003fde;--ws-logo-blue:#0878f8;--ws-logo-cyan:#08d0f8;
  --ws-link:#6db3ff;                                   /* blauw voor tekst op donker, AA */
  --ws-cta:linear-gradient(135deg,#0044d4,#0068ec);    /* wit op beide uiteinden >= 4.5:1 */
  /* ondergronden: pagina > sectie-afwisseling > kaart > verhoogd/geselecteerd */
  --ws-bg-0:#040814;--ws-bg-1:#07122b;--ws-bg-2:#0a1b42;
  --ws-card-soft:#0d2150;--ws-card:#102758;--ws-card-hi:#16356f;
  --ws-brand-line:rgba(125,175,255,.26);--ws-line-hi:rgba(8,208,248,.5);
  --ws-shadow-card:0 14px 34px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.05);
  /* functioneel */
  --ws-danger:#ff3344;--ws-success:#6dffb0;--ws-promo:#e5b94c;
}
