/* ==========================================================================
   Wijgaanoppad.nl — design tokens
   Source of truth for colour, type, spacing, radius, shadow and motion.
   Rationale & contrast notes: docs/02-brand-guide.md
   Fonts (Google Fonts):
   https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500..800&family=Nunito+Sans:opsz,wght@6..12,400..800&family=Caveat:wght@600&display=swap
   ========================================================================== */

:root {
  /* Brand (from logo) */
  --leaf: #8CBC26;      /* logo green — fills/decoration only on light bg */
  --owl: #4E4E4E;       /* logo grey */

  /* Extended palette */
  --moss: #4F7A12;      /* green for text, links, primary buttons */
  --moss-600: #406510;
  --forest: #1E3A2A;    /* dark sections */
  --forest-800: #152A1E;
  --ink: #2B2B28;       /* body text */
  --paper: #FAF6EC;     /* page background */
  --sand: #EFE6D0;      /* cards / alt sections */
  --sand-300: #E3D6B6;
  --sun: #F4A51C;       /* accent / CTA fill (use ink text on it) */
  --sun-200: #FCE3B0;
  --reed: #2E6F7E;      /* birding accent */
  --reed-100: #D8EAEC;
  --berry: #B6404A;     /* almost full / errors */
  --white: #FFFFFF;

  /* Semantic */
  --bg: var(--paper);
  --surface: var(--white);
  --surface-alt: var(--sand);
  --text: var(--ink);
  --text-muted: var(--owl);
  --link: var(--moss);
  --btn-primary-bg: var(--moss);
  --btn-primary-fg: var(--white);
  --btn-accent-bg: var(--sun);
  --btn-accent-fg: var(--ink);
  --focus: var(--reed);

  /* Service line accents */
  --line-kids: var(--moss);
  --line-kids-tint: #E6F0CF;
  --line-birds: var(--reed);
  --line-birds-tint: var(--reed-100);
  --line-shows: #B8650A;          /* large text/tags only */
  --line-shows-tint: var(--sun-200);

  /* Type */
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Nunito Sans", ui-sans-serif, system-ui, sans-serif;
  --font-hand: "Caveat", "Segoe Print", cursive;

  --fs-hero: clamp(2.7rem, 1.6rem + 5vw, 5.4rem);
  --fs-h1: clamp(2.4rem, 1.6rem + 3.6vw, 4.2rem);
  --fs-h2: clamp(1.9rem, 1.4rem + 2.2vw, 3.1rem);
  --fs-h3: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
  --fs-body: 1.0625rem;
  --fs-small: .9rem;
  --fs-hand: clamp(1.4rem, 1.2rem + .8vw, 1.9rem);
  --lh-tight: 1.05;
  --lh-body: 1.6;

  /* Space (4px base) */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --max: 1240px;

  /* Shape */
  --r-sm: 8px; --r-md: 16px; --r-lg: 28px; --r-pill: 999px;
  --r-leaf: 70% 8% 70% 8% / 70% 8% 70% 8%;   /* leaf-shaped mask (from logo) */
  --r-blob: 58% 42% 55% 45% / 48% 55% 45% 52%;

  /* Elevation */
  --shadow-1: 0 1px 2px rgb(30 58 42 / .08), 0 2px 8px rgb(30 58 42 / .06);
  --shadow-2: 0 6px 24px rgb(30 58 42 / .12);
  --shadow-3: 0 18px 50px rgb(30 58 42 / .18);

  /* Motion */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: 150ms; --dur: 280ms; --dur-slow: 600ms;
}

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