/* ============================================================
   PEST SCOUT — Design Tokens
   Aesthetic: warm, trustworthy, scout/field-guide.
   Field green + warm sand + a single amber CTA. Rounded, organic.
   ============================================================ */
:root {
  /* — Brand greens — */
  --green-900: #11271c;
  --green-800: #163522;
  --green-700: #1d4d3a;   /* primary */
  --green-600: #246b4a;
  --green-500: #2f8f5b;   /* bright field green */
  --green-300: #8fce9f;
  --green-100: #e3efe6;
  --green-50:  #eef6ef;

  /* — Warm neutrals (sand/paper) — */
  --sand-50:  #faf7f0;
  --sand-100: #f5efe2;
  --sand-200: #ece2cf;
  --sand-300: #ddcfb4;
  --paper:    #fffdf8;

  /* — Ink — */
  --ink-900: #15231b;
  --ink-700: #34453b;
  --ink-500: #5d6b62;
  --ink-300: #8b978e;

  /* — CTA (amber/orange) — */
  --cta:        #f08c00;
  --cta-strong: #d97706;
  --cta-soft:   #ffe7c2;
  --cta-ink:    #3a2400;   /* dark text on amber for AA contrast */

  /* — Semantic — */
  --bg:           var(--sand-50);
  --bg-alt:       var(--green-50);
  --surface:      var(--paper);
  --text:         var(--ink-900);
  --text-muted:   var(--ink-500);
  --brand:        var(--green-700);
  --brand-bright: var(--green-500);
  --line:         #e7ddc9;
  --star:         #f2a93b;

  /* — Type — */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-body: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --fs-eyebrow: 0.78rem;
  --fs-body: 1.0625rem;
  --fs-lead: 1.22rem;
  --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --step-1: clamp(1.18rem, 1.05rem + 0.6vw, 1.4rem);
  --step-2: clamp(1.45rem, 1.2rem + 1.1vw, 1.95rem);
  --step-3: clamp(1.85rem, 1.45rem + 1.9vw, 2.7rem);
  --step-4: clamp(2.3rem, 1.7rem + 3vw, 3.7rem);
  --step-5: clamp(2.7rem, 1.9rem + 4.2vw, 4.6rem);

  /* — Shape — */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* — Soft warm shadows — */
  --sh-sm: 0 1px 2px rgba(40, 30, 10, 0.06);
  --sh-md: 0 8px 24px -10px rgba(40, 50, 30, 0.18);
  --sh-lg: 0 24px 60px -22px rgba(30, 60, 40, 0.30);
  --sh-cta: 0 12px 24px -8px rgba(217, 119, 6, 0.45);

  /* — Layout — */
  --maxw: 1160px;
  --gutter: clamp(1.1rem, 5vw, 2.4rem);
  --section-y: clamp(3.2rem, 7vw, 6rem);

  --ring: 0 0 0 3px var(--cta-soft);
}