/*
  Design tokens — the single source of truth for colour, type and spacing.
  Token names are component-agnostic; components consume, never invent values.
  Values derived from the Figma design (file SBgEEHdDHb328J1sYzV9GE).
*/

:root {
  /* ---- Brand palette (raw) ---- */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-green: #4e9733;        /* primary brand green (decorative / large areas) */
  --color-green-dark: #245c2d;   /* dark sections + footer background */
  --color-green-light: #7fd75d;  /* light accent / light buttons */
  --color-green-muted: #788f6c;  /* muted green */
  --color-green-pale: #bfcfb3;   /* pale green surface (row background) */
  --color-orange: #ec702a;       /* brand orange (large display headings only) */
  --color-gold: #e19f1c;         /* accent */
  --color-cream: #f5f1e8;        /* light section background */
  --color-light: #fbf8f2;        /* lightest off-white surface (info-box "Licht") */
  --color-border: #dadada;       /* neutral hairline border (cards on white) */

  /* ---- Interactive green ---- */
  /* Buttons/links carrying w hite text use the design's dark green (#245c2d):
     it matches the "Agenda" button in Figma AND white text on it is ~7:1 (AA).
     The brand green #4e9733 is decorative only — white on it fails AA (~3.6:1). */
  --color-green-strong: #245c2d; /* white text ≈ 7:1 (AA) */

  /* ---- Semantic colour roles ---- */
  --color-bg: var(--color-white);
  --color-text: var(--color-black);
  --color-heading: var(--color-orange);
  --color-link: var(--color-green-strong);
  --color-focus: var(--color-green-dark);

  /* ---- Typography ---- */
  /* Display/title font is Nunito; falls back to Montserrat then system. */
  --font-serif: "Nunito", "Montserrat", system-ui, sans-serif;
  --font-sans-serif: "Montserrat", system-ui, -apple-system, sans-serif;

  --text-h1: clamp(2.5rem, 1.6rem + 3.8vw, 3.75rem);    /* 40 → 60 */
  --text-h2: clamp(2rem, 1.65rem + 1.5vw, 3rem);        /* 32 → 48 */
  --text-h3: clamp(1.5rem, 1.24rem + 1.13vw, 2.25rem);  /* 24 → 36 */
  --text-h4: clamp(1.25rem, 0.99rem + 0.56vw, 1.5rem);  /* 20 → 24 (floor kept clear of the 14px chapeau) */
  --text-h5: 1.25rem;
  --text-h6: 1.125rem;
  --text-lead: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --text-body: 1rem;
  --text-small: 0.875rem;

  /* ---- Spacing scale ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* ---- Layout rhythm ---- */
  --section-spacing: clamp(2rem, 1rem + 4vw, 4.5rem);  /* 32 → 72 (page row rhythm) */
  --row-spacer: 6rem;                                  /* gap between stacked PB rows */
  /* Filled-row inner padding, split per edge so one edge can be tuned in context
     (e.g. a row whose bottom must reserve space for a wave lapping over it). */
  --row-padding-block-start: var(--row-spacer);
  --row-padding-block-end: var(--row-spacer);
  --wave-band-overhang: 2.75rem;                       /* how far a wave band's wavy edge laps onto the row above/below */
  --footer-wave-height: 5.68vw;                        /* footer wave's lap height; = wave.svg ratio 81.73/1440. Drives the SVG height AND the matching bottom reserve on the surface it laps over (see page-content.css). */
  --container-max: 75rem;                              /* 1200px content width */
  --distance-to-edge: clamp(1rem, 5vw, 2rem);          /* column edge → viewport edge */
  --header-offset: 2.1875rem;                          /* 35px from the top of the page (desktop + mobile) */
  --a11y-bar-height: 3rem;                              /* approx height of the non-sticky accessibility top bar; used as the no-JS fallback offset for the floating header (header-offset.js measures the real height for the scroll math). Keep roughly in sync with the rendered bar. */
  /* Header content-box height (padding-block 1.5rem×2 + logo 2.75rem); used to
     pull a hero that opens a page up behind the floating header. */
  --header-height: 5.75rem;
  /* Total vertical space the floating header occupies (its height + the offset
     gap above it). A hero that opens a page bleeds up by this much, and adds it
     to its own top padding so content clears the header. */
  --header-spacer: calc(var(--header-height) + var(--header-offset));

  /* ---- Radii & elevation ---- */
  --radius-sm: 0.75rem;
  --radius: 1.125rem;
  --radius-lg: 2rem;
  --radius-pill: 999px;
  --shadow-soft: 0 0.5rem 1.5rem rgb(0 0 0 / 0.08);
}

/* Tighten the gap between stacked Page Builder rows on mobile. */
@media (max-width: 47.999rem) {
  :root {
    --row-spacer: 4rem;
    /* The wave edges are preserveAspectRatio="none", so their fixed height reads
       as a steep ripple on a narrow viewport — shrink the overhang (= the wave
       amplitude, and all the laps/gaps that track it) to dampen it on mobile. */
    --wave-band-overhang: 1.75rem;
  }
}