/* =============================================================================
   Air duct / insulation sites — design token TEMPLATE
   -----------------------------------------------------------------------------
   This file is the template. engine/_gen/palette.py derives each site's real
   palette from one primary and one accent, measures fourteen contrast pairs
   against their WCAG thresholds, and writes sites/{slug}/tokens.css — which
   build.php copies over this at deploy time.

   Seven sites across two verticals get seven palettes on purpose: six air duct
   sites that looked identical would read as a network rather than as local
   businesses, which is the lesson from the six chimney sites.

   Do not hand-edit the colour values here. Change PALETTES in palette.py, or
   the structure below, and regenerate — the generator refuses to write a
   palette that fails a contrast check, which is the only reason a footer hover
   measuring 1.37:1 against its own background cannot ship again.
   ========================================================================== */


:root {
  /* ---- Palette ------------------------------------------------------------
     Green on a pest site reads as "treated and safe". Deep pine keeps that
     without the lime-green gimmick every competitor uses. */
  --primary:      #07524F;   /* fills, large type                  */
  --primary-text: #07524F;   /* small text on white      10.22:1   */
  --primary-fill: #07524F;   /* white text on it         10.22:1   */
  --primary-dark: #053634;   /* hover                    13.53:1   */
  --primary-lite: #13DFD7;   /* on near-black             5.44:1   */
  --primary-soft: #EAF6F5;
  --primary-line: #BBDDDC;

  /* Amber carries urgency. It is the only warm color on the site and is
     spent on the call button and nothing else, so it never competes. */
  --accent:       #B14224;   /* white text on it          5.02:1   */
  --accent-dark:  #98391F;   /* hover                     7.17:1   */
  --accent-text:  #B14224;   /* small text on white       7.17:1   */
  --accent-soft:  #F4EDEB;

  --black:        #141916;
  --black-50:     #232B27;
  --black-200:    #2B342F;
  --ink:          #1B211D;   /* on ground                14.88:1   */
  --ink-2:        #45514B;   /* on ground                 7.53:1   */
  --ink-3:        #62706A;   /* on ground                 4.71:1   */
  --white:        #FFFFFF;

  /* Warm neutrals, biased away from the cool green so the two read as a
     deliberate pair rather than a tint of one hue. */
  --gray-50:      #F1F0EA;
  --gray-100:     #F5F4EF;
  --gray-200:     #E7E5DC;
  --gray-300:     #DAD7CB;
  --line:         #DEDCD3;

  /* Decorative dividers above sit below 3:1 on purpose — WCAG 1.4.11 governs
     UI component boundaries and meaningful graphics, not separators, and a
     3:1 hairline reads as a heavy dark rule. Anything that is the edge of a
     CONTROL (a text input, a select, a focus ring) uses these instead, which
     are measured against white. */
  --line-control: #767D74;   /* input border on white     4.06:1   */
  --focus:        #0B4A3A;   /* focus ring on white      10.22:1   */

  --paper:        #FFFFFF;
  --paper-2:      #F5F4EF;
  --surface:      #FFFFFF;

  /* Footer takes the deepest pine rather than a neutral near-black, so the
     page closes in the brand instead of going gray at the bottom. */
  --foot-bg:      #032826;
  --foot-ink:     #96DBD9;   /* on foot-bg                8.91:1   */
  --foot-ink-2:   #58CDC9;   /* on foot-bg                5.90:1   */
  --foot-hi:      #FFFFFF;
  --foot-line:    #064946;

  /* Footer link hover. The engine this was forked from used --primary here,
     which worked when its footer was near-black. This footer IS the brand
     colour, so --primary on it measures 1.37:1 — the link simply vanished
     under the cursor. --primary-lite is not enough either at 4.29:1. */
  --foot-hover:   #4AF5EE;   /* on foot-bg                7.40:1   */
  --on-accent:    #FFFFFF;

  --warn:         #8A5009;   /* on warn-soft              5.60:1   */
  --warn-soft:    #FBF0DF;

  /* ---- Type ---------------------------------------------------------------
     Bricolage Grotesque has genuine character at heavy weights without being
     the Inter/Space Grotesk default. Public Sans is the US federal design
     system's face — highly legible at small sizes on a phone, which is where
     most of this traffic reads, and thematically right for a nationwide
     utility service. */
  --font:         'Public Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-display: 'Bricolage Grotesque', 'Public Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --fs--1:  0.8125rem;
  --fs-0:   0.875rem;
  --fs-1:   0.9375rem;
  --fs-2:   1.0625rem;
  --fs-3:   1.25rem;
  --fs-4:   1.5rem;
  --fs-5:   1.875rem;
  --fs-6:   2.375rem;
  --fs-7:   clamp(2rem, 4.4vw, 3.25rem);

  --lh-tight: 1.06;
  --lh-head:  1.18;
  --lh-body:  1.62;

  /* Someone with wasps by the front door is not reading a brochure, so the
     scale stays tight. */
  --s-1: 0.25rem;  --s-2: 0.375rem; --s-3: 0.5rem;   --s-4: 0.75rem;
  --s-5: 1rem;     --s-6: 1.375rem; --s-7: 1.75rem;  --s-8: 2.25rem;
  --s-9: 2.75rem;  --s-10: 3.5rem;  --s-11: 4.25rem; --s-12: 5rem;

  /* Instrument-case radius: present, but small enough to read as precision. */
  --r-1: 3px;
  --r-2: 4px;
  --r-3: 6px;
  --radius:    4px;
  --radius-lg: 6px;

  --shadow-1: 0 1px 2px rgba(11, 74, 58, 0.07);
  --shadow-2: 0 4px 16px rgba(11, 74, 58, 0.09);
  --shadow-3: 0 18px 46px rgba(11, 74, 58, 0.16);

  --wrap:        1200px;
  --wrap-narrow: 780px;
}

/* Headings take the display face; body copy stays on the text face. */
h1, h2, h3, h4, .sec-head h2, .hero h1 { font-family: var(--font-display); }

/* Digits line up in columns wherever the site tabulates anything — ZIP lists,
   city counts, the coverage tables. */
.num, .herostats__n, .pricetable, .ziplist, .statgrid__n, table { font-variant-numeric: tabular-nums; }