/* WERKlink — design tokens
 * Afgeleid uit Brandguide V02.1. Gebruik uitsluitend deze variabelen;
 * geen losse hex-waarden in componenten.
 */
:root{
  /* kleur */
  --wl-blue-900: #111A39;
  --wl-blue-800: #16224A;
  --wl-blue-700: #1B2A5C;
  --wl-blue-500: #2A418F;
  --wl-blue-300: #647DD1;
  --wl-blue-100: #DDE1EC;
  --wl-blue-050: #EEF0F6;
  --wl-amber-700: #B26213;
  --wl-amber-600: #D27317;
  --wl-amber-500: #E8882A;
  --wl-amber-300: #EFAB68;
  --wl-amber-100: #FBE7D2;
  --wl-amber-050: #FDF3E9;
  --wl-ink-900: #2B2B2B;
  --wl-ink-600: #5A5A5A;
  --wl-ink-400: #8A8A8A;
  --wl-line: #DDD8D2;
  --wl-warm-100: #F7F4F0;
  --wl-warm-200: #EFEAE3;
  --wl-white: #FFFFFF;
  --wl-success: #1E7A4B;
  --wl-error: #B3261E;
  --wl-focus: #1B2A5C;

  /* rollen */
  --wl-bg: var(--wl-warm-100);
  --wl-bg-alt: var(--wl-white);
  --wl-bg-donker: var(--wl-blue-700);
  --wl-tekst: var(--wl-ink-900);
  --wl-tekst-zacht: var(--wl-ink-600);
  --wl-kop: var(--wl-blue-700);
  --wl-accent: var(--wl-amber-500);
  --wl-accent-tekst: var(--wl-amber-700);
  --wl-rand: var(--wl-line);

  /* typografie */
  --wl-font: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --wl-font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --wl-fs-display: clamp(2.5rem, 1.7rem + 3.4vw, 3.5rem);
  --wl-lh-display: 1.05;
  --wl-fs-h1: clamp(2rem, 1.5rem + 2.2vw, 2.75rem);
  --wl-lh-h1: 1.1;
  --wl-fs-h2: clamp(1.5rem, 1.2rem + 1.3vw, 2rem);
  --wl-lh-h2: 1.2;
  --wl-fs-h3: 1.375rem;
  --wl-lh-h3: 1.3;
  --wl-fs-h4: 1.125rem;
  --wl-lh-h4: 1.4;
  --wl-fs-body-lg: 1.125rem;
  --wl-lh-body-lg: 1.6;
  --wl-fs-body: 1rem;
  --wl-lh-body: 1.65;
  --wl-fs-small: 0.875rem;
  --wl-lh-small: 1.55;
  --wl-fs-label: 0.6875rem;
  --wl-lh-label: 1.4;
  --wl-fs-data: 1rem;
  --wl-lh-data: 1.4;

  /* ruimte */
  --wl-space-2xs: 4px;
  --wl-space-xs: 8px;
  --wl-space-sm: 12px;
  --wl-space-md: 16px;
  --wl-space-lg: 24px;
  --wl-space-xl: 32px;
  --wl-space-2xl: 48px;
  --wl-space-3xl: 64px;
  --wl-space-4xl: 96px;
  --wl-space-5xl: 128px;

  /* radius & schaduw */
  --wl-radius-sm: 8px;
  --wl-radius-md: 12px;
  --wl-radius-lg: 16px;
  --wl-radius-xl: 24px;
  --wl-radius-pill: 999px;
  --wl-shadow-sm: 0 1px 2px rgba(27,42,92,.06);
  --wl-shadow-md: 0 6px 18px rgba(27,42,92,.10);
  --wl-shadow-lg: 0 16px 40px rgba(27,42,92,.14);

  /* layout */
  --wl-container: 1200px;
  --wl-container-smal: 760px;
  --wl-gutter-mobiel: 20px;
  --wl-gutter-desktop: 24px;
  --wl-sectie-padding-mobiel: 48px;
  --wl-sectie-padding-desktop: 96px;
  --wl-breakpoint-sm: 640px;
  --wl-breakpoint-md: 900px;
  --wl-breakpoint-lg: 1200px;
}