/* Elzineer Design System — generated from tokens.json */
:root, [data-theme="light"] {
  --brand-zwart: #111111; /* Merkkleur 1. Het zwart van het V4-logo en de visitekaartjes. Draagt hero, contact en footer. Gebruik in componenten de semantische tokens (surface, ink), niet deze direct. */
  --brand-papier: #f3f1ec; /* Merkkleur 2. Warm tekenpapier-wit, de grond van alle lichte secties. Nooit puur wit als paginagrond. */
  --brand-rood: #d0201a; /* Merkkleur 3, Signaalrood. Het enige accent: primaire knop, maatlijn-accent, actieve navigatie. Maximaal ±10% van een scherm; nooit op het logo. */
  --brand-staal: #5e646a; /* Merkkleur 4, Staalgrijs. Secundaire tekst en metadata op lichte gronden. */
  --brand-wit: #ffffff; /* Puur wit. Alleen voor het witte logo, tekst op rood en verhoogde kaarten in licht thema. */
  --surface: var(--brand-papier); /* Paginagrond van een sectie. Licht: tekenpapier. Donker (hero, contact, footer): zwart. */
  --surface-raised: #ffffff; /* Kaarten, invoervelden en de projectkaart-titelblokken, op surface. */
  --surface-sunken: #e8e5de; /* Afwisselende sectie (bijv. Werkwijze) en foto-placeholders, zodat secties van elkaar loskomen zonder schaduw. */
  --ink: var(--brand-zwart); /* Primaire tekst, koppen, maatlijnen en iconen op surface, surface-raised en surface-sunken (16:1 of hoger in beide thema's). */
  --ink-muted: var(--brand-staal); /* Secundaire tekst, labels, metadata en placeholders op surface, surface-raised en surface-sunken (minimaal 4.7:1 in beide thema's). */
  --line: #cfcac0; /* Haarlijnen en kaartranden die alleen ordenen (decoratief, geen betekenis). Voor randen van invoervelden: line-strong. */
  --line-strong: #7a756c; /* Randen die iets betekenen: invoervelden, secundaire knop in rust, scheidingen in het titelblok. Minimaal 3:1 op alle gronden. */
  --signal: var(--brand-rood); /* Vulling van de primaire knop, accentstreep van de maatlijn, actieve nav-markering. In beide thema's hetzelfde rood. Tekst erop: on-signal. */
  --signal-hover: #a8170f; /* Hover en ingedrukte staat van een signal-vulling (on-signal blijft 7.5:1). */
  --on-signal: #ffffff; /* Tekst en iconen op een signal- of signal-hover-vulling (5.4:1 en 7.5:1). */
  --signal-text: #b3190f; /* Rood als tekst of klein icoon: foutmeldingen, stapnummers, accentwoord. Op surface, surface-raised, surface-sunken en signal-soft (≥5:1 in beide thema's). */
  --signal-soft: #f8e1de; /* Getinte achtergrond achter signal-text, bijv. de foutmelding van het contactformulier. */
  --success: #11677a; /* Bevestiging ('Bericht verstuurd'). Bewust blauwgroen, niet groen, en altijd met vinkje + woord. Als tekst op alle gronden ≥5:1. */
  --success-soft: #dcecef; /* Getinte achtergrond achter success-tekst. */
  --focus: var(--signal-text); /* Toetsenbordfocus: 3px solide ring, 3px los van het element. ≥4:1 op elke grond in beide thema's. */
}
[data-theme="dark"] {
  --surface: var(--brand-zwart);
  --surface-raised: #1b1b1b;
  --surface-sunken: #0a0a0a;
  --ink: var(--brand-papier);
  --ink-muted: #a3a7ab;
  --line: #333333;
  --line-strong: #737373;
  --signal: var(--brand-rood);
  --signal-text: #ff6b5b;
  --signal-soft: #3a1311;
  --success: #63c7db;
  --success-soft: #0d2a30;
  --focus: var(--signal-text);
}
:root {
  --space-1: 4px; /* Afstand icoon–tekst in kleine labels. */
  --space-2: 8px; /* Afstand label–invoerveld, tussen tags. */
  --space-3: 12px; /* Icoon–tekst in knoppen en contactregels. */
  --space-4: 16px; /* Zijmarge op telefoons, gap in kleine groepen. */
  --space-5: 24px; /* Binnenmarge van kaarten, gutter van het grid. */
  --space-6: 32px; /* Afstand tussen kaarten, zijmarge op desktop. */
  --space-7: 48px; /* Afstand sectietitel–inhoud. */
  --space-8: 64px; /* Verticale sectiemarge op telefoons. */
  --space-9: 96px; /* Verticale sectiemarge op desktop. */
  --space-10: 128px; /* Bovenmarge van de hero op desktop. */
  --radius-sm: 2px; /* Afgebraamde hoek: knoppen, invoervelden, tags. Bijna haaks, net niet scherp. */
  --radius-md: 4px; /* Kaarten, projectkaarten en foto's. */
  --radius-lg: 8px; /* Alleen grote beeldvlakken en de sticker-/kaartversie van het logo. */
  --stroke-hair: 1px; /* Haarlijnen en kaartranden (line). */
  --stroke-maat: 2px; /* Maatlijnen, randen van invoervelden, secundaire knop, iconen (24px). */
  --stroke-heavy: 4px; /* Hoekmarkeringen van kaarten en de actieve-navigatiestreep. */
  --layout-max: 1200px; /* Maximale breedte van de inhoud binnen een sectie. */
  --layout-text: 680px; /* Maximale regellengte van lopende tekst (±70 tekens). */
  --layout-header: 72px; /* Hoogte van de vaste header; ook de scroll-offset voor ankerlinks. */
  --layout-control: 48px; /* Hoogte van knoppen en invoervelden (groot genoeg voor duimen). */
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-sans: Barlow, "Helvetica Neue", Arial, sans-serif;
  --text-display-xl: italic 700 96px/0.92 var(--font-display); /* Alleen de hero-kop, één keer per pagina, altijd in hoofdletters. Dezelfde letter als het woordmerk (Barlow Condensed Bold Italic). Schaalt op telefoons terug tot 52px. */
  --text-display-l: italic 700 64px/0.95 var(--font-display); /* Sectietitels, in hoofdletters. Op telefoons 44px. */
  --text-heading-m: italic 700 40px/1 var(--font-display); /* Subkoppen binnen een sectie, in hoofdletters. */
  --text-heading-s: italic 700 26px/1.1 var(--font-display); /* Titels van dienstkaarten, werkwijzestappen en projecten, in hoofdletters. */
  --text-step-number: italic 700 56px/1 var(--font-display); /* Stapnummers in Werkwijze, altijd twee cijfers, in signal-text. */
  --text-maat-label: italic 600 14px/20px var(--font-display); /* Het label in een maatlijn en de eyebrow boven sectietitels, in hoofdletters. Gemeten aan de tagline van het logo: Barlow Condensed SemiBold Italic, spatiëring 0.38em. */
  --text-button-text: italic 600 18px/24px var(--font-display); /* Knoppen en de hoofdnavigatie, in hoofdletters. */
  --text-lead: 400 21px/32px var(--font-sans); /* De introzin onder een hero- of sectietitel. Maximaal drie regels. */
  --text-body: 400 17px/28px var(--font-sans); /* Alle lopende tekst. Regellengte maximaal layout-text. */
  --text-body-strong: 600 17px/28px var(--font-sans); /* Nadruk binnen lopende tekst en de labels van invoervelden. */
  --text-ui-text: 500 16px/24px var(--font-sans); /* Invoervelden, contactregels en de tekst in het titelblok. */
  --text-small: 400 14px/22px var(--font-sans); /* Hulptekst, foutmeldingen, footer en bijschriften. */
}
.display-xl {
  font-family: var(--font-display);
  font-size: 96px;
  line-height: 0.92;
  font-weight: 700;
  letter-spacing: 0.01em;
  font-style: italic;
}
.display-l {
  font-family: var(--font-display);
  font-size: 64px;
  line-height: 0.95;
  font-weight: 700;
  letter-spacing: 0.01em;
  font-style: italic;
}
.heading-m {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.01em;
  font-style: italic;
}
.heading-s {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-style: italic;
}
.step-number {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0;
  font-style: italic;
}
.maat-label {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.38em;
  font-style: italic;
}
.button-text {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: 0.06em;
  font-style: italic;
}
.lead {
  font-family: var(--font-sans);
  font-size: 21px;
  line-height: 32px;
  font-weight: 400;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 28px;
  font-weight: 400;
  letter-spacing: 0;
}
.body-strong {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: 0;
}
.ui-text {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: 0;
}
.small {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  letter-spacing: 0;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/barlow-condensed-600-italic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/barlow-condensed-700-italic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}