/* VBeek design tokens (Daniël/joist-platform-prompt.md, sectie 4.1, plus
   Daniëls huisstijldocument en zijn definitieve site-ontwerp, iteratie 8d)
   — donker/blauw, fotografisch, scherpe hoeken, moderne semi-serif in
   middelzwaar gewicht, blauw uitsluitend als accent (kopregel, kernwoord,
   CTA, dunne lijnen). Alleen semantische namen die
   internal/core/staticassets/blocks.css leest, gevuld met VBeek's eigen
   palet — zie web/templates/tenants/degrasmees/tokens.css voor hetzelfde
   contract met een compleet ander palet. */
:root {
  /* Palet (4.1): diepzwart #050608, grafiet #14161B, blauw #2B69FC. */
  --color-bg: #050608;
  --color-bg-alt: #14161B;
  --color-surface: #14161B;
  --color-border-subtle: rgba(255, 255, 255, 0.10);
  --color-text: #D7DAE0;
  --color-text-muted: #9AA3B0;
  --color-heading: #FFFFFF;
  --color-accent: #2B69FC;
  --color-accent-hover: #4C80FF;
  --color-on-accent: #FFFFFF;
  --color-highlight: #2B69FC;
  --color-border: rgba(255, 255, 255, 0.35);
  --color-footer-bg: #050608;
  --color-footer-text: #9AA3B0;

  --font-heading: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --heading-weight: 500;
  --heading-tracking: -0.01em;

  /* Scherpe hoeken, geen schaduw, dunne lijnen tussen secties. */
  --radius: 2px;
  --radius-card: 0;
  --card-border: 1px solid rgba(255, 255, 255, 0.08);
  --shadow-card: none;
  --section-divider: 1px solid rgba(255, 255, 255, 0.10);
  --container-max: 73.75rem;

  /* Sectiekop: links, dun blauw lijntje erboven. */
  --section-head-align: left;
  --section-head-margin: 0;
  --kicker-above: block;
  --kicker-below: none;
  --kicker-width: 2.125rem;
  --kicker-height: 2px;

  /* Knoppen: hoofdletters met letterafstand. */
  --button-case: uppercase;
  --button-tracking: 0.08em;
  --button-size: 0.8rem;
  --button-padding: 1.05rem 1.6rem;

  /* Header: halfdoorzichtig zwart, menu grijs, actief wit. Omlaag
     scrollen = de gewone, bijna dichte balk; terug omhoog lichter; bovenaan
     de homepage (hero onder de header) bijna doorzichtig, zodat de foto
     zichtbaar is. */
  --header-bg: rgba(5, 6, 8, 0.86);
  --header-blur: 10px;
  --header-bg-up: rgba(5, 6, 8, 0.6);
  --header-blur-up: 6px;
  --header-bg-top: rgba(5, 6, 8, 0.2);
  --header-blur-top: 2px;
  --header-height: 4.875rem;

  /* Hero: foto met verloop van zwart (links) naar transparant. */
  --hero-overlay: linear-gradient(100deg, rgba(5, 6, 8, 0.55) 0%, rgba(5, 6, 8, 0.35) 28%, rgba(5, 6, 8, 0.1) 52%, rgba(5, 6, 8, 0) 68%), linear-gradient(0deg, rgba(5, 6, 8, 0.55) 0%, rgba(5, 6, 8, 0) 30%);
  --hero-card-bg: rgba(8, 9, 12, 0.42);
  --hero-card-blur: 6px;
  --hero-text: #FFFFFF;
  --hero-subtext: #D7DAE0;

  /* Terugkerend lamellenmotief (4.1) als achtergrond van "patroon"-secties. */
  --pattern-bg: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0, rgba(255, 255, 255, 0.06) 2px, transparent 2px, transparent 16px);

  --testimonial-top: 2px solid #2B69FC;
  --cta-bg: #14161B;
  --input-bg: #14161B;
  --form-columns: 2;
  --footer-heading-color: #FFFFFF;
  --footer-link-hover: #2B69FC;
}