/**
 * MTB de Zeeleeuw — design tokens
 *
 * Ported 1:1 from the SwiftUI app's Theme.swift, so the website and app
 * read as the same brand rather than two different projects. If the app's
 * palette has moved on since this was written, update these five hex
 * values and everything downstream follows automatically.
 *
 * 2026 redesign (Apple.com-inspired): the *default* visual language is
 * now generous whitespace, a near-black/white/gray neutral system, one
 * consistent accent color for every link/CTA, and the system font stack
 * (renders as actual San Francisco on Mac/iOS visitors, not a webfont
 * substitute). The original coastal palette (navy/blue/pink/gold/green)
 * stays available — the logo badge and admin color pickers still use it —
 * it's just no longer the loud, everywhere-you-look default it was
 * before.
 */
:root {
  /* Coastal palette (from Theme.swift) — kept for the logo badge, brand
     flourishes, and the admin color pickers; no longer the default UI
     accent everywhere. */
  --z-navy: #0E2A52;
  --z-navy-soft: #1B3A68;
  --z-blue: #003466;
  --z-pink: #E23E82;
  --z-gold: #F6D949;
  --z-green: #2FAE66;

  /* Neutrals — v2.1.24: nudged from the flat Apple near-black/white/gray
     toward a neutral with a faint navy bias (paper, ink, line all carry a
     touch of --z-blue's hue) — a "chosen" neutral rather than a generic
     one, and the same family the 2026 mockup direction settled on. Still
     reads as white/near-black at a glance; only shows up as intentional
     once you look for it. */
  --z-paper: #F6F8FB;
  --z-paper-alt: #FFFFFF;
  --z-void: #000000;
  --z-ink: #0A2036;
  --z-ink-soft: #526175;
  --z-line: rgba(10, 32, 54, 0.12);

  /* The one consistent accent — matches the club's actual logo blue
     (see 2026 Apple-direction redesign note in NOTES.md), not an
     invented color. Every link and text-CTA across the site uses this
     single color. */
  --z-accent: #003466;

  /* v2.1.15 refresh: --z-accent (#003466) is close to unreadable as
     link/text color on a dark or near-black background — it's a *dark*
     navy meant for text on light paper. Dark surfaces (the footer's
     navy rows, the mobile nav panel, a dark hero) need their own,
     lighter tint of the same brand blue instead of reusing the light-
     surface accent as-is. Same hue family, just lifted enough to stay
     legible and to read as a deliberate accent rather than a near-
     invisible link. */
  --z-accent-on-dark: #6FA8DA;
  --z-navy-glass: rgba(6, 26, 51, 0.7);

  /* Derived soft tints (light backgrounds for cards/badges) */
  --z-blue-soft: #E3EAF2;
  --z-pink-soft: #FCEAF1;
  --z-gold-soft: #FEF9E4;
  --z-green-soft: #E7F7EE;

  /* Type — system stack by default (real San Francisco on Mac/iOS,
     matching apple.com exactly rather than approximating it with a
     Google-hosted lookalike). Barlow Condensed/Public Sans and the other
     font-pairing options are still selectable in Instellingen →
     Uiterlijk for anyone who preferred the earlier look. */
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Inter", sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Inter", sans-serif;
  /* v2.1.24: third type role alongside display/body — tabular data (dates,
     capacity counts, schedule stats) reads as deliberately "instrument
     panel" in a real mono face instead of falling back to the body font.
     index.php overrides this per the chosen font_pairing; this is just
     the standalone-safe fallback if tokens.css is ever loaded on its own. */
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --tracking-tight: -0.02em;

  /* Scale */
  --step-xs: 0.75rem;
  --step-sm: 0.9375rem;
  --step-base: 1rem;
  --step-lg: 1.25rem;
  --step-xl: 1.75rem;
  --step-2xl: 2.5rem;
  --step-3xl: 3.5rem;

  /* Spacing (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 4.5rem;

  /* Shape */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 180ms;

  --container-width: 1020px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur: 0ms;
  }
}

/**
 * "Grassveld"-stijlpreset (v2.1.13) — geïnspireerd op grassfeld.com
 * (Grassfeld, een fintech-app met een zachte, ronde, witruimte-rijke
 * SaaS-esthetiek: witte kaarten met een zwevende schaduw i.p.v. harde
 * randen, grote afgeronde hoeken, pastel-tint-accenten, en groen als
 * uitnodigende hoofdkleur). Voor een MTB-club is groen sowieso al
 * onderdeel van de kust-palet (--z-green) — deze preset maakt er de
 * hoofdaccent van in plaats van het blauw, en leunt verder op dezelfde
 * zachte, ronde vormtaal. Alleen custom-property-overrides: de rest van
 * de stylesheet (base/header/hero/layout-builder) volgt hier automatisch
 * uit, plus een klein aantal gerichte selectors verderop in die
 * bestanden voor dingen die geen token kunnen zijn (schaduw, gradient-
 * achtergronden, het vervangen van het contourlijnen-motief).
 */
body.theme-grassfeld {
  --z-paper: #F3FAF6;
  --z-paper-alt: #FFFFFF;
  --z-ink: #17301F;
  --z-ink-soft: #5E7568;
  --z-line: rgba(23, 48, 31, 0.09);

  /* Groen wordt de hoofdaccent (was blauw) — blijft admin-instelbaar via
     dezelfde kleurkiezer (Instellingen → Uiterlijk → zeegroen). */
  --z-accent: var(--z-green);
  --z-accent-on-dark: #7FD4A3;

  --z-blue-soft: #E3EAF2;
  --z-pink-soft: #FCEAF1;
  --z-gold-soft: #FEF9E4;
  --z-green-soft: #E3F5EA;

  /* Merkbaar ronder dan de standaard Apple-richting — Grassfeld's
     kenmerkende zachte kaartvorm. */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;

  /* Ruimere witruimte tussen rijen, zoals Grassfeld's lange, luchtige
     scrollpagina. */
  --space-16: 5rem;
  --space-24: 7rem;

  --shadow-soft: 0 24px 60px -28px rgba(23, 48, 31, 0.35);
  --shadow-soft-sm: 0 10px 28px -14px rgba(23, 48, 31, 0.28);
}