:root {
  /* =========================================================================
     1. FONT FAMILIES
     ========================================================================= */
  --font-sans: 'Roboto', sans-serif;
  --font-display: 'Roboto', sans-serif;

  /* =========================================================================
     2. TYPOGRAPHIC SCALE (Harmonized Modular Scale)
     ========================================================================= */
  --font-size-3xs: 0.625rem;  /* 10px - micro labels */
  --font-size-2xs: 0.6875rem; /* 11px - fine print, badges */
  --font-size-xs: 0.75rem;    /* 12px - auxiliary tags, tooltips */
  --font-size-sm: 0.875rem;   /* 14px - topbar, metadata, table cells */
  --font-size-base: 1rem;     /* 16px - standard body, inputs, nav links */
  --font-size-md: 1.125rem;   /* 18px - lead body, prominent subhead */
  --font-size-lg: 1.25rem;    /* 20px - section subheads, card titles */
  --font-size-xl: 1.5rem;     /* 24px - h3 headers, key metric values */
  --font-size-2xl: 1.875rem;  /* 30px - h2 section titles */
  --font-size-3xl: 2.25rem;   /* 36px - h1 page titles */
  --font-size-4xl: 3rem;      /* 48px - hero display headers */

  /* =========================================================================
     3. LINE HEIGHTS
     ========================================================================= */
  --leading-none: 1;
  --leading-tight: 1.2;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* =========================================================================
     4. FONT WEIGHTS
     ========================================================================= */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* =========================================================================
     5. SEMANTIC COMPONENT TOKENS (Website-breed gestandaardiseerd)
     ========================================================================= */
  --text-topbar: var(--font-size-sm);           /* 14px */
  --text-slogan: clamp(0.8125rem, 0.55vw + 0.55rem, 0.9375rem); /* 13px - 15px */
  --text-nav: var(--font-size-base);             /* 16px */
  --text-nav-sub: var(--font-size-sm);           /* 14px */
  --text-cta: var(--font-size-sm);               /* 14px */
  --text-badge: var(--font-size-xs);             /* 12px */
  --text-micro: var(--font-size-2xs);            /* 11px */

  /* =========================================================================
     6. FLUID HEADINGS TOKENS (Responsive)
     ========================================================================= */
  --text-hero: clamp(1.875rem, 3.5vw + 0.75rem, 3rem);     /* 30px -> 48px */
  --text-h1: clamp(1.5rem, 2.2vw + 0.6rem, 2.25rem);       /* 24px -> 36px */
  --text-h2: clamp(1.25rem, 1.6vw + 0.45rem, 1.875rem);    /* 20px -> 30px */
  --text-h3: clamp(1.125rem, 1.1vw + 0.35rem, 1.5rem);     /* 18px -> 24px */
  --text-h4: var(--font-size-lg);                           /* 20px */
  --text-body: var(--font-size-base);                       /* 16px */
  --text-body-lead: var(--font-size-md);                    /* 18px */

  /* =========================================================================
     7. BRAND COLORS
     ========================================================================= */
  --color-brand-navy: #002c6d;
  --color-brand-navy-dark: #001f4d;
  --color-brand-blue: #00B0F0;
  --color-brand-blue-hover: #0090c7;
  --color-brand-green: #87c830;
  --color-brand-amber: #f7941d;

  /* =========================================================================
     8. LAYOUT & STICKY HEADER/SIDEBAR OFFSETS
     ========================================================================= */
  --header-height: 228px;
  --sidebar-sticky-top: 175px; /* Shrunk header ~148px + 27px breathing space */
}

html, body {
  overflow-anchor: none !important;
}

/* =========================================================================
   WEBSITE-WIDE TYPOGRAPHY & LAYOUT UTILITIES
   ========================================================================= */
.sticky-sidebar {
  position: -webkit-sticky;
  position: sticky;
  top: var(--sidebar-sticky-top);
}
.text-slogan {
  font-size: var(--text-slogan);
  line-height: var(--leading-snug);
}
.text-topbar {
  font-size: var(--text-topbar);
  line-height: var(--leading-normal);
}
.text-nav-item {
  font-size: var(--text-nav);
}
.text-cta-btn {
  font-size: var(--text-cta);
}
.text-heading-hero {
  font-size: var(--text-hero);
  line-height: var(--leading-tight);
}
.text-heading-1 {
  font-size: var(--text-h1);
  line-height: var(--leading-tight);
}
.text-heading-2 {
  font-size: var(--text-h2);
  line-height: var(--leading-snug);
}
.text-heading-3 {
  font-size: var(--text-h3);
  line-height: var(--leading-snug);
}
.text-heading-4 {
  font-size: var(--text-h4);
  line-height: var(--leading-snug);
}
.text-body-lead {
  font-size: var(--text-body-lead);
  line-height: var(--leading-relaxed);
}


.border-[#F2F2F2] {
  border-color: #F2F2F2;
}