/* ============================================================
   DS-THEME v2 — brengt de hub-pagina's in lijn met het nieuwe
   VVS Design System (claude.ai/design, update 20 juli 2026,
   gebaseerd op de Presentatiegids 2026-2027).
   Laden NA assets/styles.css. Overschrijft de tokens (kleur, font,
   radius) zodat elke pagina die dit bestand laadt de nieuwe stijl
   overneemt, plus een paar koptypografie-regels.

   Fonts staan hier direct als @font-face (self-hosted, geen Google
   Fonts): zo krijgt elke pagina die ds-theme.css laadt de fonts mee,
   zonder extra <link> en zonder IP-lek naar Google. Zie ook
   assets/fonts-ds.css voor de zelfstandige pagina's.
   ============================================================ */

@font-face {
  font-family: 'Droid Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/droid-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Droid Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/droid-sans-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Oswald'; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url('fonts/oswald-var.woff2') format('woff2');
}

:root {
  /* ---- Merkkleuren, remap van de legacy-namen naar de nieuwe DS-tokens ---- */
  --geel: #FFF000;          /* was #F2E400, nu feller (crest) */
  --geel-licht: #FFF7A8;
  --geel-donker: #FFD200;
  --blauw: #071D60;         /* navy, primair */
  --blauw-donker: #1A2A66;  /* royal-deep */
  --blauw-licht: #243A8C;   /* royal */
  --blauw-mid: #1A4FB4;     /* kobalt */
  --kobalt: #1A4FB4;
  --blauw-zacht: #EEF0FA;   /* zacht lavendel-tint paneel */
  --blauw-rand: #D3D8EC;
  --periwinkle: #C5C9E1;    /* lavendel */
  --goud-heritage: #C9A84C;
  --creme: #FDF8EC;
  --paneel: #F1F3F8;        /* grey-100 */
  --wit: #ffffff;
  /* grey-700: donker genoeg voor AA op licht (9,5:1), toch zachter dan navy koppen */
  --grijs: #3A4356;
  --grijs-licht: #E2E6EE;   /* grey-200, randen */
  /* Donker genoeg voor AA bij kleine, vette tekst op wit en op lichtgroen (badges) */
  --groen: #0E6B39;
  --rood: #C42B2B;
  --radius: 8px;            /* kaarten, hoekiger dan de oude 14px */
  --radius-s: 4px;          /* knoppen, chips, inputs */
  --schaduw: 0 2px 8px rgba(7, 29, 96, 0.10);
  --schaduw-hover: 0 8px 24px rgba(7, 29, 96, 0.14);
  --font: 'Droid Sans', Verdana, Tahoma, Arial, sans-serif;
  /* Kopletter sinds aug 2026: Poppins, de letter van het Staphorst
     United-bord (zelf gehost via fonts-ds.css). Droid Sans blijft
     de terugval en de tekstletter. */
  --font-head: 'Poppins', 'Droid Sans', Verdana, Tahoma, sans-serif;
  --font-cond: 'Oswald', 'Droid Sans', 'Arial Narrow', sans-serif;
  --link: #0C29CC;
}

body { font-family: var(--font); }

/* Koppen in Poppins 700 (terugval Droid Sans, die kent geen 800/900) */
h1, h2, h3, h4,
.lp-hero h1, .formcard h2, .success h2, .section-head h2, .vac-card h3 {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: 0;
}

/* Knoppen en badges: Droid Sans 700 (geen 800 meer) */
.btn { font-weight: 700; }
.badge { font-weight: 700; }

/* Caps-labels en cijfers in Oswald condensed, met DS-tracking .10em.
   Dit geeft de matchday/gids-look uit de presentatiegids. */
.section-head .eyebrow, .tier-groep .tier-naam, .voorbeeld-badge,
.periode, .status, .demobar b {
  font-family: var(--font-cond);
  letter-spacing: .10em;
}
.hero-stats .stat strong, .kpi strong, .barometer .raised,
.voordeel .vk strong, .card-logo, .brand .logo {
  font-family: var(--font-cond);
}

/* Links binnen lopende tekst in het heldere DS-blauw (AA op wit: 9,5:1).
   :not(.btn) zodat knoppen in een formcard hun eigen kleur houden (een
   btn-blauw kreeg anders blauw-bright tekst op navy, contrast 1,6:1). */
.card-body a:not(.btn), .formcard a:not(.btn), .avg-note a:not(.btn),
.ondernemersdeur a:not(.btn), main p a:not(.btn) { color: var(--link); }