/* =========================================================================
   HUNTERDON RADON MITIGATION
   tokens.css — the single source of truth for the visual system.

   THE IDEA
   --------
   This site is about a number you cannot see without an instrument. So the
   design is an instrument: graphite bezels, paper faceplates, mono numerals,
   hairline rules and tick marks, and exactly one signal colour reserved for
   the action level and for anything you can act on.

   The three-stop scale (safe / watch / act) is not decoration — it is the
   published pCi/L scale, and those three colours are used for nothing else.

   DO NOT put component styles in this file. Only tokens.
   ========================================================================= */

:root{

  /* ---------------------------------------------------------------------
     COLOR
     Graphite is the chassis (top bar, data strips, footer).
     Paper carries the reading content.
     One signal red marks the action level and anything clickable.
     --------------------------------------------------------------------- */
  --graphite-950:#0D0F12;
  --graphite-900:#15181C;
  --graphite-800:#1F242A;
  --graphite-700:#2E353D;
  --graphite-600:#454E58;

  --sig-500:#C1272D;      /* signal red — the action level, and CTAs */
  --sig-600:#9E1F24;
  --sig-050:#FBEDEC;      /* signal tint for callout grounds */
  --on-sig:#FFFFFF;       /* text placed on top of the red */

  --paper:#FBFAF6;
  --paper-2:#F1EFE7;
  --paper-3:#E7E4D8;
  --rule:#D8D4C6;
  --rule-2:#C2BDAB;
  --white:#fff;

  --ink:#15181C;          /* headings */
  --ink-2:#4B535B;        /* body copy */
  --ink-3:#7C858E;        /* captions, meta, mono labels */

  --on-dark:#D7D3C6;      /* body copy on graphite */
  --on-dark-2:#9AA0A6;    /* meta on graphite */
  --on-dark-rule:rgba(215,211,198,.16);

  /* --- the pCi/L scale. Used ONLY for the scale and its legend. ------- */
  --lvl-safe:#2F7A4F;     /* under 2 pCi/L */
  --lvl-watch:#C98A12;    /* 2 to 4 pCi/L */
  --lvl-act:#C1272D;      /* 4 pCi/L and above */

  /* diagram-only colors — never used in UI chrome */
  --dia-soil:#3A3630;
  --dia-gas:#8E9AA6;
  --dia-slab:#B9B4A4;
  --dia-pipe:#C1272D;

  /* ---------------------------------------------------------------------
     TYPE
     Space Grotesk — display. Technical, slightly mechanical, not a serif.
     IBM Plex Sans — body. Engineered for reading small technical text.
     IBM Plex Mono — every number, label, unit and key. The instrument face.
     --------------------------------------------------------------------- */
  --display:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --t-2xs:.7rem;
  --t-xs:.775rem;
  --t-sm:.875rem;
  --t-base:1.0625rem;
  --t-md:1.15rem;
  --t-lg:1.45rem;
  --t-xl:2rem;
  --t-2xl:2.7rem;
  --t-display:clamp(2.4rem,5.2vw,4.1rem);
  --t-readout:clamp(3.4rem,9vw,6.2rem);   /* the big pCi/L numeral */

  --lh-tight:1.05;
  --lh-snug:1.28;
  --lh-body:1.7;

  --track-tight:-.03em;
  --track-label:.19em;      /* mono labels are widely tracked, always caps */

  /* ---------------------------------------------------------------------
     SPACE  (4px base)
     --------------------------------------------------------------------- */
  --s1:.25rem; --s2:.5rem;  --s3:.75rem; --s4:1rem;
  --s5:1.5rem; --s6:2rem;   --s7:3rem;   --s8:4.5rem; --s9:6.5rem;

  /* ---------------------------------------------------------------------
     STRUCTURE
     Corners are near-square on purpose. Instruments are not pill-shaped.
     --------------------------------------------------------------------- */
  --r:3px;
  --r-sm:2px;
  --r-lg:4px;

  --sh:0 1px 0 var(--rule), 0 18px 34px rgba(21,24,28,.07);
  --sh-sm:0 1px 0 var(--rule);

  --wrap:1180px;      /* full page frame */
  --doc:66ch;         /* the reading column — this site is a document */
  --measure:64ch;

  --focus:2px solid var(--sig-500);
}