/* ============================================================
   DESIGN TOKENS — Recykal.Market brand system
   (values measured from https://recykal.market — the single
   source of truth for color, font, and type sizes on this page)
   ============================================================ */
:root {
  /* Canvas / neutrals — the page is neutral-dominant, light */
  --bg: #fafafa;             /* body background */
  --paper-1: #fafaf8;
  --paper-2: #f6f5f3;
  --paper-3: #f1f1ea;
  --ink: #0a0a0a;            /* primary heading black */
  --ink-warm: #16160f;       /* warm near-black — section headings, dark bands */
  --ink-2: #1c1c1c;          /* card headings (Framer preset) */
  --black: #000;
  --white: #fff;

  /* Text grays */
  --muted: #6f6f66;          /* stat descriptions */
  --muted-2: #9a9a9a;        /* hints, timestamps */
  --muted-3: #9b9b92;        /* "IMPACT" eyebrow */
  --footer-muted: #848484;   /* © line */
  --ink-56: rgba(0, 0, 0, .56);  /* secondary body copy (#0000008f) */
  --ink-60: rgba(0, 0, 0, .60);
  --line: #E5E5EA;          /* brand guideline 09.4/09.6: card border + nav bottom border */

  /* Brand accents — used sparingly, never as button fills */
  --green: #1b8b3a;          /* primary accent, live/positive states */
  --green-deep: #00573F;     /* eyebrows/accent lines on light + headline reveal start color */
  --mint: #d9e8e2;           /* eyebrow color ON dark bands */
  --green-tint: #e5f4ea;     /* light green surface tint */
  --crimson: #a51c30;        /* deep red accent */
  --crimson-2: #d64045;

  /* Dark bands (feature/CTA sections) — ink, not green */
  --band: #16160f;
  --band-2: #0a0a0a;
  --white-56: rgba(255, 255, 255, .56);
  --white-20: rgba(255, 255, 255, .2);
  --white-12: rgba(255, 255, 255, .12);

  /* CTA — PRIMARY BUTTONS ARE BLACK with white text (brand rule) */
  --cta-bg: #000;
  --cta-text: #fff;

  /* Fonts — exact recykal.market stack */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Geist", "Inter", system-ui, sans-serif;
  --font-mono: "Kode Mono", ui-monospace, monospace;
  --font-overline: "Inter", system-ui, sans-serif;   /* 04.6 Overline role */

  /* Type scale — recykal.market's documented 04.6 Type Scale spec */
  --fs-hero: 38px;                              /* Display/H1 */
  --fs-h2: 30px;                                /* H2 */
  --fs-h3: 25px;                                /* H3 */
  --fs-h4: clamp(1.625rem, 3.4vw, 44px);       /* H4: 26–44px */
  --fs-card: var(--fs-h4);                      /* card titles = H4 role */
  --fs-body: 16px;                              /* Body */
  --fs-body-lg: 17px;
  --fs-small: clamp(12px, 1vw, 13px);          /* Meta/Caption: 12–13px */
  --fs-eyebrow: 13px;                           /* Eyebrow: 13px */

  /* Per-level letter-spacing/line-height from the 04.6 Type Scale spec */
  --ls-h1: -0.045em; --lh-h1: 1.02;
  --ls-h2: -0.036em; --lh-h2: 1.05;
  --lh-h3: 1.08;                                 /* H3: no letter-spacing in spec */
  --ls-h4: -0.04em;  --lh-h4: 1.06;
  --ls-eyebrow: -0.6px;                          /* Eyebrow tracking */

  /* Display face settings for bespoke UI (card/label titles, mobile menu,
     node names — smaller Bricolage Grotesque text outside the 4-level
     H1–H4 scale above, so kept on its own general-purpose tracking value). */
  --ls-display: -0.03em;
  --lh-display: 1.2;

  /* Motion */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur: .7s;
  --dur-fast: .35s;

  /* Grid */
  --grid-margin: clamp(1.25rem, 4.5vw, 5.5rem);
  --grid-gutter: clamp(1rem, 1.5vw, 1.75rem);

  /* Fold rhythm — every fold-to-fold transition (the .green-dot-separator
     between two sections) is exactly 1.5in, no per-position tuning */
  --fold-gap: 144px;
}