/*
 * Design tokens Inframat.
 * Alle kleuren, lettertypes en maten staan hier. Wijzig de huisstijl enkel in
 * dit bestand.
 *
 * Kleuren komen uit het hoofdlogo (Inframat Hoofdlogo.svg, 16 september 2026).
 * Contrast gemeten volgens WCAG 2.2:
 *   rood #e41816 op wit            4,73  (tekst mag, AA)
 *   wit op rood #e41816            4,73  (knoptekst mag, AA)
 *   rood #e41816 op --color-bg-alt 4,26  (NIET voor tekst)
 *   rood #e41816 op donkerblauw    3,26  (NIET voor tekst, enkel vlakken)
 *   donkerblauw #10263b op wit     15,41
 *   wit op #b3120f (hover rood)    6,98
 *   wit op #1d3a57 (hover blauw)   11,70
 *
 * Actieknoppen zijn donkerblauw, rood is enkel accent (beslissing Tom,
 * 16 september 2026).
 *   --color-text-muted op bg-alt   5,34
 *   --color-border-strong op wit   3,43  (randen van bedieningselementen, min. 3)
 */

:root {
  /* Kleuren */
  --color-primary: #10263b;
  --color-primary-hover: #1d3a57;
  --color-accent: #e41816;
  --color-accent-hover: #b3120f;
  --color-text: #1a1a1a;
  --color-text-muted: #5b6570;
  --color-text-inverse: #ffffff;
  --color-bg: #ffffff;
  --color-bg-alt: #f4f3ef;
  --color-bg-dark: #10263b;
  --color-border: #d9d6cf;
  --color-border-strong: #8f8a80;
  --color-focus: #10263b;
  --color-focus-inverse: #ffffff;

  /* Illustratie: doorsnede fundering en voeg (decoratief, geen tekst) */
  --illustration-ground: #8a6f4d;
  --illustration-base: #b9b3a6;
  --illustration-stone: #6b7580;
  --illustration-joint: #e9e2cf;

  /* Typografie */
  --font-base: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-size-base: 1rem;
  --font-size-small: 0.875rem;
  --font-size-lead: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  --font-size-h1: clamp(2rem, 1.4rem + 3vw, 3.5rem);
  --font-size-h2: clamp(1.625rem, 1.3rem + 1.6vw, 2.5rem);
  --font-size-h3: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --line-height-base: 1.6;
  --line-height-tight: 1.15;
  --font-weight-bold: 700;
  --font-weight-heavy: 800;
  --letter-spacing-caps: 0.12em;

  /* Maten */
  --radius: 8px;
  --radius-small: 4px;
  --border-width: 1px;
  --border-width-strong: 2px;
  --space-xs: 0.5rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.5rem;
  --space-section: clamp(3rem, 6vw, 6rem);
  --container: 1200px;
  --gutter: clamp(1rem, 4vw, 2rem);

  /* Onderdelen */
  --header-height: 4.5rem;
  --header-height-compact: 3.75rem;
  --actionbar-height: 4rem;
  --focus-width: 3px;
  --transition: 150ms ease;
}