/* ============================================================
   BUURTGROEN — Colors & Type foundation
   Grassroots Amsterdam green-space initiative.
   Green, earthy, playful. Import this file everywhere.
   ============================================================ */

/* ---- Fonts (Google Fonts) ----
   Display : Bricolage Grotesque  (characterful, friendly headlines)
   Body/UI : Figtree               (clean, friendly geometric sans-serif)
   Accent  : Caveat                (hand-drawn marker for stickers/annotations)
   NOTE: loaded from CDN below. If self-hosting, drop ttf/woff2 into /fonts
   and swap these @import lines for @font-face. See README "Fonts". */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Figtree:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Caveat:wght@500;600;700&display=swap');

:root {
  /* ===========================================================
     1. BASE PALETTE  — raw brand colors
     =========================================================== */

  /* Greens — the spine of the brand (earthy, leafy, never neon) */
  --green-900: #133324;  /* forest — deepest, for text on light / dark bg */
  --green-800: #1A4630;
  --green-700: #1F5D3C;  /* pine */
  --green-600: #2C7A4B;  /* PARK — primary brand green */
  --green-500: #3E9B5F;  /* grass */
  --green-400: #6BB57E;
  --green-300: #97CF9C;  /* sprout */
  --green-200: #C5E6C0;
  --green-100: #E0F1DB;  /* mist — tints, hover fills */
  --green-50:  #EFF7EB;

  /* Playful accents — Amsterdam & Dutch inspired. Use ONE at a time, like a
     flower in a field. (klaver=clover, oranje=Dutch orange, baksteen=canal-house
     brick, zon=cheese-yellow, gracht=canal blue, tulp=tulip) */
  --lime:    #C7E25C;  /* klaver — fresh sprout / highlight */
  --lime-dk: #A9C740;
  --orange:  #E2762B;  /* oranje — the Dutch national orange */
  --orange-dk:#C75F18;
  --clay:    #C2603A;  /* baksteen — Amsterdam canal-house brick */
  --clay-dk: #A44E2C;
  --sun:     #F2B84B;  /* zon / Goudageel — warm cheese-yellow */
  --sun-dk:  #E0A12F;
  --canal:   #4F93B0;  /* gracht — Amsterdam canal blue */
  --canal-dk:#3C7B96;
  --tulip:   #D45C72;  /* tulp — tulip pink-red */
  --tulip-dk:#B8455C;
  --berry:   #D45C72;  /* alias of tulp (legacy name) */

  /* Earth neutrals — warm, never cold gray */
  --soil:   #463528;  /* dark brown — alt heading ink */
  --bark:   #6B5544;
  --sand:   #E6DAC2;  /* dividers, muted fills */
  --sand-dk:#D4C3A1;
  --cream:  #FBF6EA;  /* primary page background */
  --paper:  #FFFDF6;  /* cards / raised surfaces */
  --white:  #FFFFFF;

  /* Ink — warm, green-tinged near-blacks */
  --ink:    #1E2A20;  /* primary text */
  --ink-2:  #4C5A4A;  /* secondary text */
  --ink-3:  #7E8C77;  /* muted / captions */
  --ink-4:  #A9B3A0;  /* disabled / faint */

  /* Semantic status */
  --ok:     #2C7A4B;
  --warn:   #E0A12F;
  --danger: #C2603A;
  --info:   #3F8AA6;

  /* ===========================================================
     2. SEMANTIC COLOR ROLES
     =========================================================== */
  --bg:            var(--cream);
  --bg-alt:        var(--green-50);
  --surface:       var(--paper);
  --surface-sunk:  var(--green-50);
  --fg1:           var(--ink);     /* primary text */
  --fg2:           var(--ink-2);   /* secondary text */
  --fg3:           var(--ink-3);   /* muted text */
  --fg-on-green:   #F4FBEF;        /* text on green surfaces */

  --primary:       var(--green-600);
  --primary-press: var(--green-700);
  --primary-tint:  var(--green-100);
  --accent:        var(--clay);
  --accent-press:  var(--clay-dk);
  --highlight:     var(--lime);

  --border:        #E3DAC6;        /* hairline on cream */
  --border-strong: #CDBFA3;
  --border-green:  var(--green-200);
  --ring:          color-mix(in oklab, var(--green-600) 45%, transparent);

  /* ===========================================================
     3. TYPE TOKENS
     =========================================================== */
  --font-display: 'Bricolage Grotesque', 'Trebuchet MS', system-ui, sans-serif;
  --font-body:    'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-accent:  'Caveat', 'Bradley Hand', cursive;

  /* Fluid display scale (clamped) */
  --fs-display: clamp(2.75rem, 1.6rem + 5.6vw, 5.5rem);  /* hero */
  --fs-h1: clamp(2.1rem, 1.4rem + 3.2vw, 3.5rem);
  --fs-h2: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem);
  --fs-h3: clamp(1.3rem, 1.1rem + 0.9vw, 1.6rem);
  --fs-h4: 1.2rem;
  --fs-lead: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  --fs-body: 1.0625rem;   /* 17px */
  --fs-sm: 0.9375rem;     /* 15px */
  --fs-xs: 0.8125rem;     /* 13px */
  --fs-eyebrow: 0.78rem;

  --lh-tight: 1.04;
  --lh-snug: 1.18;
  --lh-body: 1.6;

  --tracking-tight: -0.02em;
  --tracking-eyebrow: 0.14em;

  /* ===========================================================
     4. RADII / SHADOW / SPACING / MOTION
     =========================================================== */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;
  --r-blob: 42% 58% 62% 38% / 48% 42% 58% 52%;  /* organic blob */

  --sh-sm: 0 1px 2px rgba(30,42,32,.06), 0 1px 3px rgba(30,42,32,.05);
  --sh-md: 0 4px 10px rgba(30,42,32,.07), 0 2px 4px rgba(30,42,32,.05);
  --sh-lg: 0 14px 30px rgba(30,42,32,.10), 0 6px 12px rgba(30,42,32,.06);
  --sh-pop: 0 18px 44px rgba(19,51,36,.16);
  --sh-green: 0 10px 24px rgba(44,122,75,.22);

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);  /* playful overshoot */
  --dur-fast: .14s;
  --dur: .24s;
  --dur-slow: .4s;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES  (opt-in via .bg-prose or use vars)
   ============================================================ */
.bg-prose, .prose {
  font-family: var(--font-body);
  color: var(--fg1);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 450;   /* Hanken reads thin at 400 — nudge up */
}
.prose h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
  color: var(--fg1);
}
.prose h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
  color: var(--fg1);
}
.prose h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  font-weight: 600;
  color: var(--fg1);
}
.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 800;
  color: var(--fg1);
}
.lead { font-size: var(--fs-lead); color: var(--fg2); line-height: 1.5; font-weight: 500; }
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--primary);
}
.accent-script {
  font-family: var(--font-accent);
  font-weight: 600;
  color: var(--clay);
  line-height: 1;
}
small, .small { font-size: var(--fs-sm); }
code, .mono {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: .92em;
  background: var(--green-50);
  border: 1px solid var(--border-green);
  border-radius: var(--r-xs);
  padding: .08em .38em;
  color: var(--green-700);
}