/* De Grasmees design tokens (Daniël/joist-platform-prompt.md, sectie 4.1)
   — groen/natuurlijk, laagdrempelig, witte kaarten met zachte schaduw.
   Kleuren afgelezen van de huidige site (degrasmees.nl, iteratie 8d):
   donkergroen voor koppen/knoppen/footer, lichtgroen als accentlijn,
   een warme crème als tweede achtergrond. De typografie blijft bewust
   Fraunces/IBM Plex (Jacco, iteratie 8d: "hoeft niet persé naar
   Montserrat/Inter") — alleen zwaarder dan bij VBeek. Zelfde semantische
   contract als web/templates/tenants/vbeek/tokens.css, bewust een heel
   ander palet — het contrast tussen de twee tenants is gewenst (sectie 4.1:
   "Dit contrast is gewenst, niet een bug"). */
:root {
  --color-bg: #FFFFFF;
  --color-bg-alt: #F4F1EA;
  --color-surface: #FFFFFF;
  --color-border-subtle: #E8E3D8;
  --color-text: #2C3E35;
  --color-text-muted: #55655C;
  --color-heading: #1A3B26;
  --color-accent: #1A3B26;
  --color-accent-hover: #2E5E3E;
  --color-on-accent: #FFFFFF;
  --color-highlight: #8FB339;
  --color-border: #1A3B26;
  --color-footer-bg: #1A3B26;
  --color-footer-text: #FFFFFF;

  --font-heading: 'Fraunces', Georgia, serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --heading-weight: 650;

  /* Zacht afgeronde hoeken, kaarten zonder rand maar met schaduw. */
  --radius: 6px;
  --radius-card: 6px;
  --card-border: none;
  --shadow-card: 0 6px 24px rgba(26, 59, 38, 0.10);
  --shadow-card-hover: 0 12px 32px rgba(26, 59, 38, 0.16);
  --media-frame-padding: 0 0 3rem;

  /* Sectiekop: gecentreerd, lichtgroen streepje eronder. */
  --section-head-align: center;
  --section-head-margin: auto;
  --kicker-above: none;
  --kicker-below: block;
  --kicker-width: 3.75rem;
  --kicker-height: 4px;

  --button-case: uppercase;
  --button-tracking: 0.06em;
  --button-size: 0.85rem;

  --header-bg: rgba(255, 255, 255, 0.95);
  --header-shadow: 0 1px 12px rgba(0, 0, 0, 0.06);
  --nav-color: #2C3E35;
  --nav-color-active: #1A3B26;

  /* Hero: grasfoto over de volle hoogte, kop in het midden. */
  --hero-height: min(78vh, 46rem);
  --hero-overlay: linear-gradient(0deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.1));
  --hero-text: #FFFFFF;

  --cta-bg: #F4F1EA;
  --input-bg: #F7F7F5;
  --detail-image-ratio: 4 / 3;

  --footer-columns: 2;
  --footer-heading-color: #8FB339;
  --footer-heading-case: uppercase;
  --footer-heading-tracking: 0.08em;
  --footer-brand-case: uppercase;
  --footer-brand-tracking: 0.04em;
  --footer-link-hover: #8FB339;
  --footer-divider: 1px solid rgba(255, 255, 255, 0.15);
}