/* =========================================================================
   TOMS RIVER COMMERCIAL REFRIGERATION
   tokens.css — the single source of truth for the visual system.

   THE DESIGN BRIEF, WRITTEN DOWN SO IT CANNOT DRIFT.

   This is a B2B site read by somebody standing in front of a piece of failing
   equipment, usually on a phone, usually in a hurry, quite often at night.
   The paradigm is a SERVICE DESK SPEC SHEET: instrument-panel greys, hairline
   rules instead of cards, monospace for every number and label, and a
   documentary top-to-bottom rhythm with numbered sections. Nothing rounded,
   nothing soft, no drop shadows pretending to be paper.

   Cold teal is the only accent, and it is used the way an instrument uses a
   colour — to mark the one thing that is live — never as decoration.

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

:root{

  /* ---------------------------------------------------------------------
     COLOUR
     Graphite is the structural colour: masthead, dark bands, footer.
     Paper is a cool off-white — deliberately not cream, not warm.
     Teal marks anything live, clickable, or currently measured.
     Amber is for one thing only: a temperature that is out of range.
     --------------------------------------------------------------------- */
  --gr-950:#0A0F12;
  --gr-900:#101619;
  --gr-800:#1B242A;
  --gr-700:#2C3940;
  --gr-600:#42535C;

  --teal-500:#00B39A;
  --teal-600:#009683;
  --teal-300:#5FDCC9;
  --teal-ink:#04231F;      /* text placed on top of the teal */

  --amber-500:#E8963C;     /* out of range. Nothing else. */

  --paper:#F2F4F5;
  --paper-2:#E7EBEC;
  --white:#fff;

  --rule:#D2DADD;          /* hairline */
  --rule-strong:#AFBBC0;

  --ink:#101619;           /* headings */
  --ink-2:#3E4C53;         /* body copy */
  --ink-3:#6C7C84;         /* captions, mono labels, meta */

  --on-dark:#B7C6CC;       /* body copy on graphite */
  --on-dark-2:#7C8F98;     /* meta on graphite */
  --on-dark-rule:rgba(183,198,204,.20);

  --ok:#2F7D5B;

  /* schematic-only colours — never used in UI chrome */
  --dia-line:#7C8F98;
  --dia-hot:#E8963C;
  --dia-cold:#5FDCC9;

  /* ---------------------------------------------------------------------
     TYPE
     Archivo    — grotesk. Headings tight and heavy, body at normal weight.
     IBM Plex Mono — every label, code, figure, table number and nav item.
     Two families, both doing a specific job, neither decorative.
     --------------------------------------------------------------------- */
  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --t-xs:.74rem;
  --t-sm:.86rem;
  --t-base:1.0625rem;
  --t-md:1.18rem;
  --t-lg:1.45rem;
  --t-xl:2rem;
  --t-2xl:2.7rem;
  --t-3xl:3.6rem;

  --lh-tight:1.06;
  --lh-snug:1.28;
  --lh-body:1.66;

  --track-tight:-.028em;
  --track-mono:.09em;      /* mono labels are always letterspaced + uppercase */

  /* ---------------------------------------------------------------------
     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
     Radius is 0 nearly everywhere on purpose. This is a panel, not a card.
     --------------------------------------------------------------------- */
  --r:0px;
  --r-sm:2px;

  --wrap:1240px;
  --measure:68ch;

  --focus:2px solid var(--teal-600);
}