/* ==========================================================================
   The Bug Guy — design tokens

   Colors are the audited brand, not invented. #231F20 and #9FC286 were read
   out of the logo PNG's own pixels; the greens and sage come from the live
   site's stylesheet. See BRAND.md for provenance on every value.
   ========================================================================== */

:root {
  /* --- Core brand ------------------------------------------------------- */
  --ink:            #231F20;  /* logo black — rich black, not #000 */
  --ink-deep:       #171415;  /* pressed further for gradient floors */
  --patrol-green:   #9FC286;  /* the green inside the logo crosshair */
  --field-green:    #74877A;  /* site accent: links, buttons, card rules */
  --field-deep:     #58665C;  /* button borders, dark field */
  --sage:           #C5C8B5;  /* the page background of the current site */
  --sage-pale:      #DFE1D4;  /* lifted sage for alternating bands */
  --rule:           #AEB298;  /* hairlines */

  /* --- Authority connective tissue -------------------------------------
     Sampled from the Mosquito Authority and Pest Authority CSS token blocks.
     Their action colour is NOT red — it is #B01657, a deep raspberry-crimson.
     The navy and pale blue are common to BOTH Authority brands, which makes
     them the safest things to inherit under a "Mosquito & Pest Authority"
     endorsement. Used sparingly: CTAs and the endorsement strip only, so the
     Bug Guy green stays the dominant identity. */
  --alert:          #B01657;
  --alert-deep:     #8A1145;
  --authority-navy: #00253D;
  --authority-pale: #E2F3FF;

  /* Review stars. Gold is what a star rating is expected to look like, and
     nothing in the Bug Guy palette reads as one — a green star just looks
     broken. Warmed down from the usual bright yellow so it sits with sage. */
  --star:           #D9A441;

  /* --- Text ------------------------------------------------------------- */
  --heading:        #2A2A2C;
  --body:           #4A4A4D;
  --body-soft:      #6C6C70;
  --on-dark:        #F2F3EC;
  --on-dark-soft:   #C3C9BA;

  /* --- Surfaces --------------------------------------------------------- */
  --surface:        #FFFFFF;
  --surface-warm:   #F7F8F2;

  /* --- Gradients --------------------------------------------------------
     The client called out that a flat white site reads as unfinished and
     that gradients should do the work of separating sections. These are the
     only four allowed; sections alternate between them and flat surfaces. */
  --grad-patrol:  linear-gradient(160deg, #2C3A30 0%, #231F20 55%, #171415 100%);
  --grad-field:   linear-gradient(165deg, #7E9180 0%, #66786C 60%, #58665C 100%);
  --grad-sage:    linear-gradient(180deg, #DFE1D4 0%, #C5C8B5 100%);
  --grad-alert:   linear-gradient(135deg, #C51A63 0%, #B01657 45%, #8A1145 100%);

  /* A hairline of patrol-green that reads as a scope reticle across dividers */
  --grad-reticle: linear-gradient(90deg, transparent, var(--patrol-green) 18%, var(--patrol-green) 82%, transparent);

  /* --- Type ------------------------------------------------------------- */
  /* Body keeps Courier Prime, which is the current brand and is free on
     Google Fonts. Headings: the live site uses Anodyne, which is an Adobe
     Typekit face tied to the client's kit and its domain allowlist — see
     BRAND.md. Oswald carries the same condensed, stamped, authoritative
     register and is licensed for any domain. */
  --font-head: 'Oswald', 'Anodyne', 'Impact', sans-serif;
  --font-body: 'Courier Prime', ui-monospace, 'Courier New', monospace;
  --font-ui:   'Barlow Semi Condensed', system-ui, sans-serif;

  --step--1: clamp(0.82rem, 0.80rem + 0.10vw, 0.88rem);
  --step-0:  clamp(1.00rem, 0.97rem + 0.15vw, 1.09rem);
  --step-1:  clamp(1.20rem, 1.12rem + 0.40vw, 1.45rem);
  --step-2:  clamp(1.50rem, 1.34rem + 0.80vw, 2.05rem);
  --step-3:  clamp(1.90rem, 1.60rem + 1.50vw, 2.90rem);
  --step-4:  clamp(2.40rem, 1.85rem + 2.75vw, 4.10rem);

  /* --- Space / shape ---------------------------------------------------- */
  --gutter:   clamp(1.15rem, 0.9rem + 1.2vw, 2rem);
  --band:     clamp(3.5rem, 2.6rem + 4vw, 6.5rem);
  --measure:  68ch;
  --wrap:     1180px;
  --wrap-narrow: 780px;

  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;

  --shadow-sm: 0 2px 8px -4px rgb(35 31 32 / 0.30);
  --shadow-md: 0 14px 32px -20px rgb(35 31 32 / 0.45);
  --shadow-lg: 0 28px 60px -34px rgb(35 31 32 / 0.55);

  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}