/* ================================================================
   PEST MANAGEMENT INDIA — Design Tokens (v2)
   NOTE: this file intentionally DIVERGES from the top-level
   /tokens.css shipped with DESIGN-TOKENS.md. That doc called for an
   "evolved, not cloned" palette; the client later asked for the
   Bugfree reference matched closely, not just structurally. Values
   below are the reference's own computed styles (colour/font/radius),
   pulled live from html.awaikenthemes.com/bugfree — see chat for the
   extraction. Copy/content/icons remain PMI's own throughout.
   ================================================================ */

:root{

  /* ---------- Colour: Forest (dark, primary) — reference's exact hero/footer bg ---------- */
  --color-forest-950:#022018;   /* deepest — footer base, overlays */
  --color-forest-900:#033F2D;   /* header / hero band base — reference exact value */
  --color-forest-800:#0B4B37;   /* dark surface, dark cards */
  --color-forest-700:#155940;   /* borders/dividers on dark surfaces */
  --color-forest-600:#22704F;   /* secondary buttons on dark, links on dark */

  /* ---------- Colour: Lime (accent) — reference's exact CTA/icon colour ---------- */
  --color-lime-100:#EEFAD3;     /* tint backgrounds, badge fills on light */
  --color-lime-300:#DBF49E;     /* hover tints, subtle highlights */
  --color-lime-500:#C7F268;     /* PRIMARY accent — reference exact value */
  --color-lime-600:#AFDB4C;     /* accent hover/pressed */
  --color-lime-800:#4C6B1E;     /* accent text on light bg (AA-safe) */

  /* ---------- Colour: Neutral / paper — reference's exact body bg/text ---------- */
  --color-paper:   #F5F5F5;     /* page background — reference exact value */
  --color-paper-2: #ECECE6;     /* alternate section background */
  --color-surface: #FFFFFF;     /* cards, form panels */
  --color-ink:     #484C44;     /* primary text — reference exact value */
  --color-ink-soft:#6B7066;     /* secondary text, descriptions */
  --color-ink-mute:#92988C;     /* placeholders, captions, meta */
  --color-border:  #E1E1DA;     /* hairline borders on light surfaces */
  --color-border-dark: rgba(255,255,255,.14); /* hairline borders on dark surfaces */

  /* ---------- Colour: Semantic ---------- */
  --color-success: #3B9A5C;
  --color-warning: #E2A93B;
  --color-error:   #D14343;
  --color-info:    var(--color-forest-600);

  /* ---------- Shadows (ink-tinted, never pure black) ---------- */
  --shadow-sm: 0 1px 2px rgba(3,63,45,.06);
  --shadow-md: 0 12px 28px -16px rgba(3,63,45,.22);
  --shadow-lg: 0 24px 56px -20px rgba(3,63,45,.30);
  --shadow-accent: 0 14px 30px -12px rgba(199,242,104,.45); /* under lime CTAs on light bg */

  /* ---------- Radius — reference uses 10px on buttons/cards, pill only on badges/icon-circles ---------- */
  --radius-sm: 8px;    /* inputs, small chips */
  --radius-md: 10px;   /* buttons — reference exact value */
  --radius-lg: 20px;   /* cards */
  --radius-xl: 32px;   /* hero/media frames */
  --radius-full: 999px;/* pills, avatar/icon circles */

  /* ---------- Spacing scale (4px base) ---------- */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --space-9:96px; --space-10:128px;

  /* ---------- Typography — Fraunces (headings) + Satoshi (body/UI) ---------- */
  --font-display:'Fraunces', ui-serif, Georgia, serif;
  --font-body:'Satoshi', ui-sans-serif, system-ui, sans-serif;

  /* Scale rebuilt for legibility: body sits at 17px (not 16), the smallest
     UI text never drops below 15px, and headings keep a clear step between
     each level at every viewport. All fluid via clamp() so the proportions
     hold from 320px through to 1440px+ without per-breakpoint overrides. */
  --fs-h1: clamp(2.5rem, 4.2vw + 1rem, 4.25rem);
  --fs-h2: clamp(1.9rem, 2.4vw + 0.9rem, 2.9rem);
  --fs-h3: clamp(1.25rem, 0.7vw + 1rem, 1.5rem);
  --fs-lede: clamp(1.075rem, 0.5vw + 0.95rem, 1.25rem);
  --fs-body: 1.0625rem;   /* 17px */
  --fs-small: 0.9375rem;  /* 15px — floor for body-adjacent UI text */
  --fs-micro: 0.8125rem;  /* 13px — meta/caption only, never body copy */
  --fs-eyebrow: 0.875rem;

  --lh-tight: 1.08;
  --lh-snug: 1.3;
  --lh-normal: 1.65;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: .18s;
  --dur-base: .35s;
  --dur-slow: .6s;

  /* ---------- Container — reference exact max-width ---------- */
  --container-max: 1300px;
  --container-pad: 15px;

  /* ---------- Page frame — the reference insets every section card from the
     viewport edge and rounds its corners; these two drive that system. ---------- */
  --frame-gap: 40px;
  --radius-shell: 30px;

  /* Header height at REST (not scrolled) — the header is sticky AND overlays
     the hero (transparent at rest), so it pulls the hero up by this amount
     and the hero pads back down by it. This only needs to track the REST
     size, not the smaller .is-stuck size: the hero is off-screen by the time
     the header ever shrinks, so nothing depends on --header-h at that point.
     Keep in sync with .site-header__logo / .site-header__inner padding. */
  --header-h: 168px;

}

@media (max-width: 800px){
  :root{ --frame-gap: 12px; --radius-shell: 20px; }
}
@media (max-width: 1100px){ :root{ --header-h: 148px; } }
@media (max-width: 480px){ :root{ --header-h: 116px; } }

/* Dark-surface context: flip text/border tokens when a section sits on --color-forest-900 etc. */
.on-dark{
  --color-ink: #FFFFFF;
  --color-ink-soft: #C9D6CD;
  --color-border: var(--color-border-dark);
}