/* ============================================================
   TOKENS — single source of truth for the theme.
   Change a value here and it updates everywhere on the site.
   Nothing else in the CSS should contain a raw colour or size.

   Palette: WARM INK / HIGH-VIZ AMBER / CREAM — workwear.

   The first pass at this site was an "instrument panel": violet
   accent, mono type on every label, cool grey, hairline borders.
   The niche is measurement, so the reasoning was sound and the
   result was wrong — it read like a dashboard product rather
   than like a crew that drills your slab. Radon buyers are
   homeowners and their agents, and they are choosing a
   contractor, not software.

   So the language is a work vest and a job sign:
     · warm ink and cream. No cool greys anywhere.
     · ONE high-viz amber, used hard, for anything you can press.
     · radius is ZERO. Nothing is rounded.
     · depth is a HARD OFFSET shadow or a thick border, never a
       blur.
     · monospace ONLY where there is a real number to read — a
       pCi/L figure or the phone. Everywhere else it reads as a
       developer tool, which is the corporate tell.

   Spruce, gold and brick further down are NOT brand colours.
   They encode a radon reading — low / watch / act — and appear
   nowhere else on the site. That restraint is the only reason
   the reading scale is legible at a glance.
   ============================================================ */
:root{
  /* ---- brand palette ----
     --brand is the warm near-black that carries the header, the
     dark bands and the footer. --accent is the brick red used
     for eyebrows, links, counters and rules; --zest is the amber
     and it is reserved for things you can press plus the urgency
     strip. The engine stylesheet distinguishes brand (surfaces)
     from accent (actions), and unlike site #9 this design keeps
     them genuinely different colours — the dark is a surface,
     never a button. */
  --brand:#1F1A15;         /* warm ink — header, dark sections, hub heads, area band */
  --brand-dk:#151109;      /* deeper ink — footer, hovers, hero fallback */
  --brand-md:#3A322A;      /* lifted ink — rules and hover states on dark */
  --brand-lt:#EDE5D6;      /* pale wash — menu + tile hover only */

  --accent:#C0341A;        /* brick — eyebrows, links, counters, rules */
  --accent-dk:#9C2914;     /* accent hover */
  --accent-lt:#FBEDE9;     /* pale wash */
  --ruby:#D9A21B;          /* decorative only */

  --zest:#FFB000;          /* high-viz amber — call buttons, urgency strip */
  --zest-lt:#FFF3D6;
  --zest-ink:#1F1A15;      /* text on amber — warm near-black, NEVER white.
                              Site #5 shipped a phone CTA that was white on
                              white in 34 of 37 places because this token was
                              wrong. It is load-bearing. */
  --zest-dk:#D89400;       /* amber hover */

  /* ---- surfaces & text ---- */
  --bg:#FFFFFF;            /* page background */
  --cream:#F7F2E8;         /* alternating surface — warm, never a cool grey */
  --ink:#1F1A15;           /* body text */
  --muted:#5C5147;         /* secondary text */
  --line:#D8CDB8;          /* borders & rules */

  /* ---- rgb triplets, for rgba() ----
     CSS cannot build an rgba() from a hex custom property, so
     anything an overlay needs must live here as a triplet. */
  --scrim-rgb:21,17,9;     /* hero photo overlay — warm, to match the ink */
  --band-rgb:31,26,21;     /* CTA band */
  --ink-rgb:31,26,21;      /* shadow tint */
  --zest-rgb:255,176,0;    /* pulse ring */

  --paper:#FFFFFF;         /* mobile panel + sticky bar surface */
  --paper-rgb:255,255,255;

  /* ---- text on the dark surfaces ---- */
  --on-brand:#FFFFFF;
  --on-brand-dim:#E6DCCB;
  --on-brand-mute:#CFC3B2;
  --on-brand-fade:#9C8F7E;

  /* ---- reading scale ----
     Data encoding, not decoration. These three appear ONLY on the
     pCi/L scale in the hero and in the reading callouts. Using
     them anywhere else would destroy the one place on this site
     where a colour carries a meaning rather than a mood. */
  --read-low:#2E6B4F;      /* under 2 */
  --read-watch:#D9A21B;    /* 2 to 4 — EPA says consider fixing */
  --read-act:#C0341A;      /* 4 and over — EPA action level */

  /* ---- type ----
     No webfont. Site #9 self-hosts Anton because a condensed
     poster face IS its design and the system fallbacks for it are
     absent on phones. This design does not need one: it is built
     on weight and case, not on a specific letterform, and the
     heaviest weight of the system UI face is present everywhere
     and costs zero bytes. Dropping the file also removes the
     shared-webfont fingerprint between two sites in one portfolio.

     main.css sets headings to 900 rather than the 400 site #9 uses,
     because Anton has one weight and a system sans does not. */
  --display:ui-sans-serif,system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --serif:var(--display);  /* alias — main.css and the engine's inner-page
                              templates ask for --serif for headings */
  --sans:var(--display);
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;  /* numbers only */

  /* ---- the workwear motif ----
     A diagonal hazard band. It is the one decorative element in the
     design and it is what stops an ink header reading as a generic
     dark navbar. Declared here because main.css may not contain a
     raw colour (hard rule #2) and a gradient is made of colours. */
  --hazard:repeating-linear-gradient(45deg,
      var(--zest) 0 14px, var(--brand) 14px 28px);

  /* ---- shape & rhythm ---- */
  --r:0;                   /* nothing is rounded in this design */
  --r-sm:0;
  --maxw:1200px;           /* content width */
  --shadow:none;           /* no soft depth anywhere — hard offsets instead */

  /* ---- hero focal point ----
     The hero is a mitigation riser running up the outside of a
     house — white pipe, inline fan, discharge above the roofline.
     The form column sits on the LEFT and the scrim is heaviest
     there, so the photograph is only really legible on the right.
     The pipe is composed into the right third and X pushes the
     crop that way to keep it clear of the form. */
  --hero-focus:70% 40%;
  --hero-focus-sm:64% 44%;

  /* Minimum height for the city/service hero band. */
  --hero-band-h:min(58vh,470px);
}