/* Compassion NL Design System — generated from tokens.json */
:root, [data-theme="default"] {
  --c-blue-core: #2a5eec; /* Core Blue, the brand blue (library swatch) and the logo's Compassion blue. Use it through `c-primary` for actions and links; white text on it clears 5.4:1. */
  --c-blue-high: #aabff7; /* High Blue. Secondary text on Dark Blue (7.9:1); icon tiles; a thread block on dark grounds. */
  --c-blue-mid: #6a8ef2; /* Mid Blue. Replaces Core Blue in the thread on dark grounds, where it separates from the navy. */
  --c-blue-low: #1d42a5; /* Low Blue. Hover state of primary actions (`c-primary-hover`); white on it clears 8.8:1. */
  --c-blue-dark: #11265e; /* Dark Blue. Dark surfaces (hero, footer, dark slides) and headings on light grounds (13.6:1 on `c-bg`). */
  --c-off-black: #121a1a; /* Off Black. Body text (`c-ink`) on eggshell and white; a thread block on light grounds. */
  --c-low-black: #000000; /* Low Black, the library's pure black. Text uses `c-off-black` instead. */
  --c-grey-high: #d2d5df; /* High Grey. Stronger dividers (`c-border-strong`). */
  --c-grey-mid: #7c8399; /* Mid Grey. Subtle text: placeholders, captions, specimen labels (`c-ink-subtle`). 3.8:1 on white and 3.6:1 on `c-bg`, below 4.5:1 by design: never use it for body copy. */
  --c-grey-low: #494f61; /* Low Grey. Secondary text (`c-ink-muted`): hints, small print. 7.7:1 on `c-bg`. */
  --c-white: #ffffff; /* Cards and inputs. Pages sit on eggshell, not white. */
  --c-eggshell-high: #fcf8f4; /* High Eggshell. The default page background (`c-bg`) and light slides; headings on dark slides. */
  --c-eggshell-mid: #f7f0eb; /* Mid Eggshell. Alternate section background (`c-bg-2`) and the card slide. */
  --c-eggshell-low: #eae4df; /* Low Eggshell. Hairline dividers and input outlines (`c-border`); third background tone (`c-bg-3`). */
  --c-green-high: #c2e189; /* High Green. Accent on the Low Brown theme surface; a thread block on dark grounds. */
  --c-green-mid: #499e57; /* Mid Green. Success (`c-success`), the Midgroen theme surface and a thread block. */
  --c-green-low: #235339; /* Low Green. The Groen theme surface. */
  --c-yellow-high: #fff2ad; /* High Yellow. Accent on the Low Green and Low Orange theme surfaces; stat numerals on dark. */
  --c-yellow-mid: #ffd257; /* Mid Yellow. Library swatch with no assigned role in this system. */
  --c-yellow-low: #fdb518; /* Low Yellow. Accent on Dark Blue (8.1:1), the Geel theme surface, warning (`c-warning`), eyebrows and stat numerals on dark, and a thread block. */
  --c-pink-high: #fac6d2; /* High Pink. Accent on the Low Pink theme surface; a thread block on dark grounds. */
  --c-pink-mid: #ee828d; /* Mid Pink. The Roze theme surface and the thread's pink block. */
  --c-pink-low: #a50f25; /* Low Pink. The Rood theme surface. */
  --c-orange-high: #ff9c7c; /* High Orange. Library swatch with no assigned role. Only 3.4:1 on Low Orange: don't pair the two for text. */
  --c-orange-mid: #fb513a; /* Mid Orange. Error text and destructive buttons (`c-error`). 3.3:1 against white both ways, below 4.5:1 by design: always pair it with an icon or a word. */
  --c-orange-low: #ab270a; /* Low Orange. The Oranje theme surface. */
  --c-brown-high: #f1b782; /* High Brown. Library swatch with no assigned role. */
  --c-brown-mid: #914a22; /* Mid Brown. Library swatch with no assigned role. */
  --c-brown-low: #6c3813; /* Low Brown. The Bruin theme surface; a thread block on light grounds. */
  --c-primary: var(--c-blue-core); /* Primary action colour: filled buttons, links, the focused input border and eyebrows (5.1:1 on `c-bg`). */
  --c-primary-hover: var(--c-blue-low); /* Primary actions on hover. */
  --c-primary-press: var(--c-blue-dark); /* Primary actions when pressed. */
  --c-core-blue: var(--c-blue-dark); /* Legacy alias for the DARK surface (Dark Blue), not the library's Core Blue. Headings and pages use it, so it stays; prefer `c-blue-dark` in new work. */
  --c-navy: var(--c-blue-dark); /* Alias of Dark Blue, same as `c-blue-dark`. */
  --c-blue-tint: var(--c-blue-high); /* Blue tint, alias of High Blue. */
  --c-blue-tint-2: #eaf1fd; /* Pale blue wash. Derived; not a library swatch. */
  --c-link-on-dark: #7fa5f5; /* Link blue on Dark Blue (5.9:1): the "Bekijk meer" link on dark (Button `link-on-dark`). Hand-picked in the specimen; not a library swatch. */
  --c-ink: var(--c-off-black); /* Body text on `c-bg`, `c-bg-2` and white (16.7:1 on `c-bg`). */
  --c-ink-strong: var(--c-off-black); /* Labels and strong text; same value as `c-ink`. */
  --c-ink-muted: var(--c-grey-low); /* Secondary text, hints and small print on `c-bg` and white. */
  --c-ink-subtle: var(--c-grey-mid); /* Placeholders and captions. Below 4.5:1 by design (see `c-grey-mid`). */
  --c-border: var(--c-eggshell-low); /* Hairline dividers and input outlines. 1.3:1 on white by design: a soft hairline. A focused input's border turns `c-primary`. */
  --c-border-strong: var(--c-grey-high); /* Stronger dividers where the hairline is too faint. */
  --c-bg: var(--c-eggshell-high); /* Page background. */
  --c-bg-2: var(--c-eggshell-mid); /* Alternate section background. */
  --c-bg-3: var(--c-eggshell-low); /* Third background tone. */
  --theme-blue-surface: var(--c-blue-dark); /* Blauw theme card or divider surface. Its title, body and link take `theme-blue-accent`. */
  --theme-blue-accent: var(--c-yellow-low); /* Blauw theme ink: title, body and link on `theme-blue-surface` (8.1:1). */
  --theme-green-surface: var(--c-green-low); /* Groen theme card or divider surface. Its title, body and link take `theme-green-accent`. */
  --theme-green-accent: var(--c-yellow-high); /* Groen theme ink: title, body and link on `theme-green-surface` (7.8:1). */
  --theme-greenmid-surface: var(--c-green-mid); /* Midgroen theme card or divider surface. Its title, body and link take `theme-greenmid-accent`. */
  --theme-greenmid-accent: var(--c-off-black); /* Midgroen theme ink: title, body and link on `theme-greenmid-surface` (5.3:1). */
  --theme-brown-surface: var(--c-brown-low); /* Bruin theme card or divider surface. Its title, body and link take `theme-brown-accent`. */
  --theme-brown-accent: var(--c-green-high); /* Bruin theme ink: title, body and link on `theme-brown-surface` (6.5:1). */
  --theme-red-surface: var(--c-pink-low); /* Rood theme card or divider surface. Its title, body and link take `theme-red-accent`. */
  --theme-red-accent: var(--c-pink-high); /* Rood theme ink: title, body and link on `theme-red-surface` (5.2:1). */
  --theme-orange-surface: var(--c-orange-low); /* Oranje theme card or divider surface. Its title, body and link take `theme-orange-accent`. */
  --theme-orange-accent: var(--c-yellow-high); /* Oranje theme ink: title, body and link on `theme-orange-surface` (6.1:1). */
  --theme-yellow-surface: var(--c-yellow-low); /* Geel theme card or divider surface. Its title, body and link take `theme-yellow-accent`. */
  --theme-yellow-accent: var(--c-blue-dark); /* Geel theme ink: title, body and link on `theme-yellow-surface` (8.1:1). */
  --theme-pink-surface: var(--c-pink-mid); /* Roze theme card or divider surface. Its title, body and link take `theme-pink-accent`. */
  --theme-pink-accent: var(--c-blue-dark); /* Roze theme ink: title, body and link on `theme-pink-surface` (5.6:1). */
  --c-green: var(--c-green-mid); /* Alias of Mid Green, kept for pages that use the name. */
  --c-lime: var(--c-green-high); /* Alias of High Green, kept for pages that use the name. */
  --c-gold: var(--c-yellow-low); /* Alias of Low Yellow, kept for pages that use the name. */
  --c-yellow: var(--c-yellow-low); /* Alias of Low Yellow, kept for pages that use the name. */
  --c-cream: var(--c-yellow-high); /* Alias of High Yellow, kept for pages that use the name. */
  --c-salmon: var(--c-pink-mid); /* Alias of Mid Pink, the thread's pink block. */
  --c-pink: var(--c-pink-mid); /* Alias of Mid Pink, kept for pages that use the name. */
  --c-pink-soft: var(--c-pink-high); /* Alias of High Pink, kept for pages that use the name. */
  --c-red: var(--c-orange-mid); /* Alias of Mid Orange (the library has no red); used for errors. */
  --c-brown: var(--c-brown-low); /* Alias of Low Brown, kept for pages that use the name. */
  --c-black: var(--c-off-black); /* Alias of Off Black, kept for pages that use the name. */
  --c-success: var(--c-green-mid); /* Success status. Same lightness as `c-error` (1.0:1): always pair a status colour with an icon or a word. */
  --c-warning: var(--c-yellow-low); /* Warning status, as a fill. 1.8:1 on white, so never text on light grounds; Dark Blue text on it clears 8.1:1. */
  --c-error: var(--c-orange-mid); /* Error status and destructive actions. See `c-orange-mid` for its contrast. */
  --c-info: var(--c-blue-core); /* Informational status. */
  --shadow-xs: 0 1px 2px rgba(12,28,71,0.05); /* Subtle default elevation. Navy-tinted, never neutral black. */
  --shadow-sm: 0 1px 3px rgba(12,28,71,0.06), 0 1px 2px rgba(12,28,71,0.04); /* Subtle default elevation for cards and controls. */
  --shadow-md: 0 4px 12px rgba(12,28,71,0.08), 0 2px 4px rgba(12,28,71,0.04); /* Content cards and cards that lift on hover. */
  --shadow-lg: 0 12px 32px rgba(12,28,71,0.12), 0 4px 8px rgba(12,28,71,0.05); /* Reserved for floating, elevated elements. */
  --shadow-card: 0 3px 4px rgba(0,0,0,0.05); /* The characteristic small card shadow. */
}
:root {
  --sp-1: 4px; /* 4px, the base grid unit. Tight gaps between icon and label. */
  --sp-2: 8px; /* 8px. Small gaps. */
  --sp-3: 12px; /* 12px. Gaps inside compact components. */
  --sp-4: 16px; /* 16px. Standard padding in inputs and cards. */
  --sp-5: 24px; /* 24px. Horizontal button padding; gaps between cards. */
  --sp-6: 32px; /* 32px. Gaps between groups. */
  --sp-7: 48px; /* 48px. Card padding on slides; large gaps. */
  --sp-8: 64px; /* 64px. Section padding on desktop (lower end). */
  --sp-9: 96px; /* 96px. Section padding on desktop (upper end); slide top and bottom padding. */
  --r-sm: 8px; /* 8px. Small image insets and chips. */
  --r-sm-md: 12px; /* 12px. Small buttons, icon buttons, dropdowns and icon tiles. */
  --r-md: 16px; /* 16px. Buttons, cards, inputs and media: the default radius. */
  --r-lg: 24px; /* 24px. Large media and hero panels; photos on slides. */
  --r-pill: 192px; /* Fully rounded: pills, tags and the frosted photo-label capsules. */
  --r-round: 50%; /* Circles and discs. */
  --thread-radius: 0; /* 0. The Thread is always sharp-cornered, never rounded. */
  --fw-light: 300; /* Light 300. */
  --fw-regular: 400; /* Regular 400. Body copy and lead paragraphs. */
  --fw-medium: 500; /* Medium 500. */
  --fw-demi: 600; /* DemiBold 600. H3, H4, labels and eyebrows. */
  --fw-bold: 700; /* Bold 700. Display, H1, H2 and buttons. */
  --fw-extra: 800; /* ExtraBold 800. */
  --thread-units: 12; /* The thread divides into 12 units (twelfths). */
  --thread-block-min: 1; /* The smallest block is 1/12 of the run. */
  --thread-block-max: 6; /* The largest block is 6/12 of the run. */
  --thread-width-min: 1%; /* The thread is at least 1% of the product's width. */
  --thread-width: 1.25%; /* The default thread width, 1.25% of the product's width, the Thread component's default. Decks use it (24px at 1920). */
  --thread-width-max: 4%; /* The thread is at most 4% of the product's width. */
  --ease: cubic-bezier(0.4, 0, 0.2, 1); /* The standard ease for UI transitions, at about `dur`. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* The expressive ease-out for entrances. */
  --dur-fast: 120ms; /* 120ms. Short transitions. */
  --dur: 200ms; /* 200ms. The standard transition duration. */
  --dur-slow: 320ms; /* 320ms. Longer transitions and entrances. */
  --font-sans: "Neighbour Sans", "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --text-fs-display: 700 80px/1.05 var(--font-sans); /* Hero display in `c-core-blue` (Dark Blue), Bold, slightly negative tracking. Class `.ds-display`. */
  --text-fs-h1: 700 48px/1.06 var(--font-sans); /* Page headline in Dark Blue, Bold. Class `.ds-h1`. */
  --text-fs-h2: 700 30px/1.33 var(--font-sans); /* Section headline in Dark Blue, Bold. Class `.ds-h2`. */
  --text-fs-h3: 600 24px/1.33 var(--font-sans); /* Sub-headline in Dark Blue, DemiBold. Class `.ds-h3`. */
  --text-fs-h4: 600 20px/1.4 var(--font-sans); /* Card and block titles in Dark Blue, DemiBold. Class `.ds-h4`. */
  --text-fs-lg: 400 18px/1.4 var(--font-sans); /* Lead paragraph in `c-ink`. Class `.ds-lead`. */
  --text-fs-body: 400 16px/1.4 var(--font-sans); /* Body copy in `c-ink`. Class `.ds-body`. */
  --text-fs-sm: 400 14px/1.4 var(--font-sans); /* Small print in `c-ink-muted`. Class `.ds-small`; eyebrows use this size in DemiBold uppercase (`.ds-eyebrow`). */
  --text-fs-xs: 400 12px/1.4 var(--font-sans); /* Captions and fine print. */
}
.fs-display {
  font-family: var(--font-sans);
  font-size: 80px;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.fs-h1 {
  font-family: var(--font-sans);
  font-size: 48px;
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.fs-h2 {
  font-family: var(--font-sans);
  font-size: 30px;
  line-height: 1.33;
  font-weight: 700;
  letter-spacing: 0;
}
.fs-h3 {
  font-family: var(--font-sans);
  font-size: 24px;
  line-height: 1.33;
  font-weight: 600;
  letter-spacing: 0;
}
.fs-h4 {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0;
}
.fs-lg {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.fs-body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.fs-sm {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.fs-xs {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
@font-face {
  font-family: "Neighbour Sans";
  src: url("fonts/NeighbourSans-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neighbour Sans";
  src: url("fonts/NeighbourSans-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neighbour Sans";
  src: url("fonts/NeighbourSans-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neighbour Sans";
  src: url("fonts/NeighbourSans-DemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neighbour Sans";
  src: url("fonts/NeighbourSans-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neighbour Sans";
  src: url("fonts/NeighbourSans-ExtraBold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}