/* GEGENEREERD — bron: eventmodel/sketches/embrace-simplicity-website-mock/style-guide.css. Niet hier wijzigen; fix de bron en draai ./generate. */
/* ==========================================================================
   Embrace Simplicity Design System — "Blauwdruk"
   ==========================================================================
   Esthetiek: een rustige bedrijfssite als een technische tekening. Papierwitte
   grond, inktzwarte tekst, petrol als enige kleur. Haarlijnen in plaats van
   kaarten, kleine mono-labels boven elk blok, grote koppen in een lichte dikte.

   Waarom deze richting?
   - Onderzoek 2026-10-16 (onderzoek-websites.md): de sterkste sites (Mollie,
     Linear, Stripe, Tweag) zijn rustig door schaarse kleur, haarlijnrasters,
     mono-labels en koppen in 500 in plaats van vet.
   - Het event model is de blauwdruk van de software. De site leest als die
     tekening: lanen, cellen, lijnen. Geen event-modelingkleuren.
   - Opdrachtgever: "rustiger en veel meer een globaal beeld" en Champions
     League. Helder voelde nog als een sjabloon (kaarten, schaduw, banden).
   - Petrol (#0B5563) blijft het merk: 8,4:1 op wit, continuïteit met Helder.
   - Alles zelf gehost in de app (FontSelfHost); bezoekers raken Google nooit.

   Kenmerken:
   - Koppen Hanken Grotesk 500, tekst Source Sans 3, labels JetBrains Mono
   - Grond papier #FAF9F6, vlak #F2F0EA, inkt #15181C, lijn #E2DED5
   - Merk petrol #0B5563; amber alleen als kleine markering
   - Radius 3–12px, nauwelijks schaduw, rasters met 1px-lijnen
   ========================================================================== */

/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/mock/font/24c2e4dd6638a9b4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/mock/font/cfc8a4efd5290e6e.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/mock/font/24c2e4dd6638a9b4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/mock/font/cfc8a4efd5290e6e.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/mock/font/24c2e4dd6638a9b4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/mock/font/cfc8a4efd5290e6e.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/mock/font/b19c2080652a3c2b.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/mock/font/cc27b30471250057.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/mock/font/b19c2080652a3c2b.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/mock/font/cc27b30471250057.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/mock/font/288bc398c253f4e3.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/mock/font/181da826c709fd98.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/mock/font/288bc398c253f4e3.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/mock/font/181da826c709fd98.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/mock/font/288bc398c253f4e3.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/mock/font/181da826c709fd98.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/mock/font/288bc398c253f4e3.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/mock/font/181da826c709fd98.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* --------------------------------------------------------------------------
   Design Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Merk: diep blauwgroen */
  --teal-50:  #EEF6F7;
  --teal-100: #D4E9EB;
  --teal-200: #A9D2D6;
  --teal-300: #74B4BA;
  --teal-400: #3F9198;
  --teal-500: #1B727A;
  --teal-600: #0F636C;
  --teal-700: #0B5563;
  --teal-800: #08414C;
  --teal-900: #062F37;

  /* Accent: amber (markering) */
  --amber-100: #FCEBCB;
  --amber-300: #F2C677;
  --amber-500: #E8A33D;
  --amber-700: #9A6412;

  /* Koele neutralen */
  --gray-0:   #FFFFFF;
  --gray-50:  #F2F0EA;
  --gray-100: #E9E6DE;
  --gray-200: #E2DED5;
  --gray-300: #CFCAC0;
  --ink-400:  #8A8D93;
  --ink-500:  #62666D;
  --ink-600:  #41454C;
  --ink-900:  #15181C;

  /* Status */
  --green-600: #2F7D5B;
  --green-50:  #E9F4EE;
  --red-600:   #B3261E;
  --red-50:    #FBEAE8;
  --red-100:   #F5D3CF;

  --color-bg:               #FAF9F6;
  --color-bg-subtle:        var(--gray-50);
  --color-bg-surface:       #FFFFFF;
  --color-bg-surface-hover: #F6F4EF;
  --color-bg-muted:         var(--gray-100);

  --color-border:        var(--gray-200);
  --color-border-subtle: #ECE9E2;
  --color-border-strong: var(--gray-300);
  --color-border-focus:  var(--teal-600);

  --color-primary:        var(--teal-700);
  --color-primary-bright: var(--teal-600);
  --color-primary-soft:   var(--teal-50);
  --color-primary-glow:   rgba(11, 85, 99, 0.18);
  --color-accent:         var(--amber-500);
  --color-accent-soft:    var(--amber-100);

  --color-text:            var(--ink-900);
  --color-text-heading:    var(--ink-900);
  --color-text-secondary:  var(--ink-600);
  --color-text-muted:      var(--ink-500);
  --color-text-on-primary: #FFFFFF;

  --color-success:    var(--green-600);
  --color-success-bg: var(--green-50);
  --color-warning:    var(--amber-700);
  --color-warning-bg: #FBF1DE;
  --color-error:      var(--red-600);
  --color-error-bg:   var(--red-50);
  --color-error-soft: var(--red-100);
  --color-error-glow: rgba(179, 38, 30, 0.18);
  --color-danger:      var(--red-600);
  --color-danger-soft: var(--red-50);
  --color-info:       var(--teal-600);
  --color-info-bg:    var(--teal-50);

  --font-heading: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --text-xs:   0.8125rem;
  --text-sm:   0.9375rem;
  --text-base: 1.0625rem;
  --text-lg:   1.1875rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --text-3xl:  clamp(1.875rem, 1.5rem + 1.4vw, 2.5rem);
  --text-4xl:  clamp(2.25rem, 1.7rem + 2.2vw, 3.25rem);
  --text-5xl:  clamp(2.5rem, 1.8rem + 3vw, 3.75rem);

  --leading-tight:   1.12;
  --leading-snug:    1.3;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;
  --tracking-tight:  -0.025em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-xs: var(--space-2);
  --space-sm: var(--space-3);
  --space-md: var(--space-4);
  --space-lg: var(--space-8);
  --space-xl: var(--space-16);

  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-pill: 9999px;
  --radius-full: 50%;

  --shadow-sm:   0 1px 0 rgba(21, 24, 28, 0.04);
  --shadow-md:   0 1px 2px rgba(21, 24, 28, 0.06);
  --shadow-lg:   0 12px 32px rgba(21, 24, 28, 0.08);
  --shadow-xl:   -8px 0 32px rgba(18, 38, 43, 0.14);
  --shadow-glow: 0 0 0 4px var(--color-primary-glow);

  --transition-fast: 120ms ease-out;
  --transition-base: 200ms ease-out;

  --container-max:     76rem;
  --container-padding: clamp(1rem, 0.5rem + 2vw, 2rem);

  --focus-ring: 2px solid var(--color-border-focus);

  /* Grafieken (gevalideerd licht én donker: contrast ≥ 3.5:1, kleurenblinde buren ΔE ≥ 20) */
  --chart-1: #0B5563;
  --chart-2: #B87C0C;
  --chart-3: #6E4A8A;
  --chart-4: #C2507A;
  --chart-5: #5C6B8A;
  --chart-6: #6F7F22;
  --chart-grid:      var(--color-border-subtle);
  --chart-axis:      var(--color-text-muted);
  --chart-vorig:     var(--ink-400);
  --chart-goed:      var(--color-success);
  --chart-let-op:    var(--color-warning);
  --chart-slecht:    var(--color-danger);
  --chart-schatting: var(--teal-200);
}

:root:root[data-theme="dark"] {
  --color-bg:               #121416;
  --color-bg-subtle:        #17191C;
  --color-bg-surface:       #1B1E21;
  --color-bg-surface-hover: #212428;
  --color-bg-muted:         #212428;
  --color-border:           #2C3035;
  --color-border-subtle:    #24272B;
  --color-border-strong:    #3A3F45;
  --color-border-focus:     #5CC2C9;
  --color-primary:          #5CC2C9;
  --color-primary-bright:   #84D4D9;
  --color-primary-soft:     #16302F;
  --color-primary-glow:     rgba(92, 194, 201, 0.22);
  --color-accent:           #F2B755;
  --color-accent-soft:      #33291A;
  --color-text:             #E8E6E1;
  --color-text-heading:     #F5F3EE;
  --color-text-secondary:   #C2C0BA;
  --color-text-muted:       #9A9893;
  --color-text-on-primary:  #121416;
  --color-success:    #6CC79C;
  --color-success-bg: #1C2D25;
  --color-warning:    #F2B755;
  --color-warning-bg: #33281A;
  --color-error:      #F0857C;
  --color-error-bg:   #3A1F1D;
  --color-error-soft: #4A2522;
  --color-danger:     #F0857C;
  --color-danger-soft:#3A1F1D;
  --color-info:       #5CC2C9;
  --color-info-bg:    #15343A;
  --chart-1: #5CC2C9;
  --chart-2: #F0B94A;
  --chart-3: #C9A9E3;
  --chart-4: #F08AB0;
  --chart-5: #A3B1D1;
  --chart-6: #B5C766;
  --chart-schatting: #24474C;
  --chart-vorig: #82959A;
}


/* --------------------------------------------------------------------------
   Reset & Basis
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--transition-fast);
}
a:hover { color: var(--color-primary-bright); text-decoration-color: var(--color-accent); }

::selection { background: var(--teal-100); color: var(--ink-900); }

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}


/* --------------------------------------------------------------------------
   Typografie
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-text-heading);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4);
}
h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); line-height: var(--leading-snug); }
h4 { font-size: var(--text-lg); letter-spacing: 0; }

p { margin: 0 0 var(--space-4); max-width: 68ch; }
small { font-size: var(--text-sm); color: var(--color-text-muted); }
strong { font-weight: 600; color: var(--color-text-heading); }

.mono, code, kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-variant-numeric: tabular-nums;
}
code {
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.35em;
}

.kicker {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}

.lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}


/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.section { padding-block: var(--space-16); }
.section + .section { border-top: 1px solid var(--color-border-subtle); }

.section-header { margin-bottom: var(--space-10); max-width: 46rem; }

.section-title {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-3);
}

.section-subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

.grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}


/* --------------------------------------------------------------------------
   Site Header
   -------------------------------------------------------------------------- */
.site-header {
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: 4.5rem;
  flex-wrap: wrap;
}
.header-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text-heading);
  text-decoration: none;
}
.header-logo:hover { color: var(--color-primary); }
.header-logo-mark {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  font-size: var(--text-base);
  font-weight: 700;
}
.header-subtitle {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text-muted);
}


/* --------------------------------------------------------------------------
   Knoppen
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: var(--space-3) var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast),
              color var(--transition-fast), box-shadow var(--transition-fast);
}
.btn:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  background: var(--color-primary);
  color: var(--color-text-on-primary);
}
.btn-primary:hover:not(:disabled) {
  background: var(--color-primary-bright);
  color: var(--color-text-on-primary);
  
}

.btn-secondary {
  background: var(--color-bg-surface);
  color: var(--color-primary);
  border-color: var(--color-border-strong);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-danger {
  background: var(--color-danger);
  color: #FFFFFF;
}
.btn-danger:hover:not(:disabled) { filter: brightness(0.92); }

.btn-sm { min-height: 2.25rem; padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.btn-lg { min-height: 3.25rem; padding: var(--space-4) var(--space-8); font-size: var(--text-lg); }


/* --------------------------------------------------------------------------
   Kaarten
   -------------------------------------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}
.card:hover { box-shadow: var(--shadow-md); border-color: var(--color-border-strong); }

.card-image {
  aspect-ratio: 16 / 10;
  width: 100%;
  object-fit: cover;
  background: var(--color-bg-subtle);
}

.card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
  flex: 1;
}

.card-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--color-text-heading);
  margin: 0;
}

.card-description {
  color: var(--color-text-secondary);
  margin: 0;
}

.card-price {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--color-text-heading);
}

.card-vendor {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-primary);
}

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border-subtle);
  background: var(--color-bg-surface-hover);
}


/* --------------------------------------------------------------------------
   Meldingen
   -------------------------------------------------------------------------- */
.alert {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
}
.alert-title { font-weight: 600; color: var(--color-text-heading); margin: 0; }
.alert-message { margin: 0; color: var(--color-text-secondary); }

.alert-success { border-left-color: var(--color-success); background: var(--color-success-bg); }
.alert-warning { border-left-color: var(--color-warning); background: var(--color-warning-bg); }
.alert-error   { border-left-color: var(--color-error);   background: var(--color-error-bg); }
.alert-info    { border-left-color: var(--color-info);    background: var(--color-info-bg); }


/* --------------------------------------------------------------------------
   Formulier
   -------------------------------------------------------------------------- */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.form-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-heading);
}

.form-control {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-control::placeholder { color: var(--color-text-muted); }
.form-control:hover { border-color: var(--ink-400); }
.form-control:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 1px;
  border-color: var(--color-border-focus);
  box-shadow: var(--shadow-glow);
}
textarea.form-control { min-height: 8rem; resize: vertical; }
.form-control[aria-invalid="true"] { border-color: var(--color-error); box-shadow: 0 0 0 3px var(--color-error-glow); }

.form-hint { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }

.form-row {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}


/* --------------------------------------------------------------------------
   Hero (publieke site)
   -------------------------------------------------------------------------- */
.hero {
  padding-block: var(--space-20) var(--space-16);
}
.hero-title {
  font-size: var(--text-5xl);
  max-width: 18ch;
  margin-bottom: var(--space-6);
}
.hero-title em {
  font-style: normal;
  color: var(--color-primary);
}
.hero-lead {
  font-size: var(--text-xl);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  max-width: 38rem;
  margin-bottom: var(--space-8);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }


/* --------------------------------------------------------------------------
   Stat-panel (bewijs in cijfers / beheer)
   -------------------------------------------------------------------------- */
.stat-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
.stat-panel {
  padding: var(--space-5) var(--space-6);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.stat-value {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1;
}
.stat-label {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}


/* --------------------------------------------------------------------------
   Swatches (kleurenpalet in de preview)
   -------------------------------------------------------------------------- */
.swatch-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
}
.swatch {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-surface);
  font-size: var(--text-xs);
}
.swatch-color { height: 4rem; }
.swatch-label { padding: var(--space-2) var(--space-3); font-family: var(--font-mono); color: var(--color-text-secondary); }


/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */
.text-muted { color: var(--color-text-muted); }
.text-center { text-align: center; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.stack > * + * { margin-top: var(--space-4); }


/* --------------------------------------------------------------------------
   Website-bouwstenen (scanbaar: kop, één zin, beeld, knop)
   -------------------------------------------------------------------------- */

/* Hero met beeld ernaast */
.hero-split {
  display: grid;
  gap: var(--space-10);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 60rem) {
  .hero-split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}
.hero-beeld {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  background: var(--color-bg-subtle);
}
.hero-beeld img { width: 100%; height: auto; display: block; }
.hero-noot { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }

/* Markering: amber onder één woord */
.markeer {
  background-image: linear-gradient(transparent 64%, var(--amber-300) 64%, var(--amber-300) 90%, transparent 90%);
  padding-inline: 0.06em;
}
:root[data-theme="dark"] .markeer {
  background-image: linear-gradient(transparent 64%, rgba(242, 183, 85, 0.45) 64%, rgba(242, 183, 85, 0.45) 90%, transparent 90%);
}

/* Herkenbare pijn: kleine kaarten */
.pijn-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.pijn-kaart {
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-subtle);
  font-weight: 600;
  color: var(--color-text-heading);
}

/* Stappen: genummerde kaarten */
.stappen {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  counter-reset: stap;
  list-style: none;
  padding: 0;
  margin: 0;
}
.stap {
  position: relative;
  padding: var(--space-8) var(--space-6) var(--space-6);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.stap::before {
  counter-increment: stap;
  content: counter(stap);
  position: absolute;
  top: calc(var(--space-4) * -1);
  left: var(--space-6);
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  font-family: var(--font-heading);
  font-weight: 700;
}
.stap-titel { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700; margin: 0 0 var(--space-2); color: var(--color-text-heading); }
.stap-tekst { margin: 0; color: var(--color-text-secondary); }

/* Project met screenshot */
.project-kaart .card-image { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.label-tag {
  display: inline-block;
  padding: 0.1rem var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: 600;
}

/* Afsluitende band met knop */
.cta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-10) var(--space-8);
  border-radius: var(--radius-xl);
  background: var(--color-primary);
  color: var(--color-text-on-primary);
}
.cta-band h2 { color: var(--color-text-on-primary); margin: 0; font-size: var(--text-2xl); }
.cta-band p { margin: var(--space-2) 0 0; color: var(--color-text-on-primary); opacity: 0.9; }
.cta-band .btn-secondary { background: var(--color-bg-surface); color: var(--color-primary); border-color: transparent; }

/* Twee kolommen: tekst naast beeld */
.duo {
  display: grid;
  gap: var(--space-10);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 60rem) { .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }


/* --------------------------------------------------------------------------
   Responsive (alleen fluid token-overrides)
   -------------------------------------------------------------------------- */
@media (max-width: 48rem) {
  :root { --text-2xl: 1.5rem; --text-xl: 1.25rem; }
  .section { padding-block: var(--space-12); }
  .hero { padding-block: var(--space-12) var(--space-10); }
  .cta-band { padding: var(--space-8) var(--space-6); }
}

/* --------------------------------------------------------------------------
   Blauwdruk-signatuur: grote koppen licht, kleine koppen stevig, labels in mono,
   kaarten als vlakken met een haarlijn in plaats van schaduw.
   -------------------------------------------------------------------------- */
h1, h2 { font-weight: 500; }
h3, h4 { font-weight: 600; }
.kicker { font-family: var(--font-mono); font-weight: 500; color: var(--color-text-muted); }
.card, .card:hover { box-shadow: none; }
.card:hover { border-color: var(--color-primary); }

/* --------------------------------------------------------------------------
   Steunkleuren (10-16, opdrachtgever: "wat meer kleuren"). Petrol blijft het merk;
   vier steunkleuren geven elk blok een eigen kleur. Vlak = de zachte variant met
   inkt erop; de volle kleur alleen voor lijnen, stippen en kleine vlakken.
   -------------------------------------------------------------------------- */
:root {
  --color-amber: #E8A33D;  --color-amber-soft: #FBEBCF;
  --color-coral: #D9674A;  --color-coral-soft: #F8E1D9;
  --color-sage:  #5E8C6A;  --color-sage-soft:  #E2EDE4;
  --color-iris:  #5B63B7;  --color-iris-soft:  #E4E5F5;
}
:root:root[data-theme="dark"] {
  --color-amber: #F2B755;  --color-amber-soft: #3A2E1A;
  --color-coral: #EE8A6E;  --color-coral-soft: #3A221B;
  --color-sage:  #8CC09A;  --color-sage-soft:  #1C2C21;
  --color-iris:  #9AA0E6;  --color-iris-soft:  #22243D;
}