/* =========================================================================
   ERIE POLE BARNS
   tokens.css — the single source of truth for the visual system.

   Every other stylesheet reads from here. Change a value once and it
   changes across all generated pages.

   THE DESIGN IDEA — "spec sheet".
   Post-frame buildings are bought by their dimensions: a 30x40, a 40x60,
   an 8-foot sidewall, a 40 psf truss. So the site is built to read like a
   builder's spec sheet rather than a brochure — light paper stock, a
   condensed industrial headline face, monospace for every number and
   dimension, and rules instead of shadows. Nothing floats; everything is
   ruled, measured and labelled.

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

:root{

  /* ---------------------------------------------------------------------
     COLOR
     Paper carries the page. Barn red marks anything clickable or
     structural. Charcoal is the ink and the one dark band. Steel blue-grey
     is reserved for the blueprint drawing so it never competes with the red.
     --------------------------------------------------------------------- */
  --red-700:#7E211C;
  --red-600:#9E2B25;      /* the brand red */
  --red-500:#B8382F;
  --red-ink:#FFF6F3;      /* text placed on top of the red */
  --red-wash:#F6E7E3;     /* tint block behind red-accented callouts */

  --char-950:#1C1815;     /* the dark band + footer */
  --char-900:#241F1A;
  --char-800:#332C25;

  --ink:#241F1A;          /* headings */
  --ink-2:#4E4740;        /* body copy */
  --ink-3:#7C736A;        /* captions, meta */

  --paper:#F7F4ED;        /* page background — warm oat */
  --paper-2:#EFEAE0;      /* recessed panels */
  --paper-3:#E6E0D3;      /* table stripes */
  --line:#D8D0C1;         /* every rule on the site */
  --line-2:#BFB5A3;       /* heavier rule for section heads */
  --white:#FFFDF9;

  --steel:#4A5560;        /* blueprint line work */
  --steel-2:#77848F;
  --steel-3:#A9B4BD;

  --on-dark:#D6CEC1;      /* body copy on the charcoal band */
  --on-dark-2:#95897A;    /* meta on the charcoal band */
  --on-dark-line:rgba(214,206,193,.2);

  --ok:#2F6B41;
  --warn:#8A5A16;

  /* drawing-only colors — never used in UI chrome */
  --dw-steel:#6E7C88;
  --dw-timber:#B08D5C;
  --dw-ground:#8A7C63;
  --dw-snow:#DDE6EC;

  /* ---------------------------------------------------------------------
     TYPE
     Oswald      — condensed, industrial. Headings and nav, mostly uppercase.
     IBM Plex Sans — body. Neutral and workmanlike at small sizes.
     IBM Plex Mono — every dimension, price, label and spec figure.
     --------------------------------------------------------------------- */
  --head:"Oswald","Arial Narrow",Impact,sans-serif;
  --body:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --t-xs:.75rem;
  --t-sm:.875rem;
  --t-base:1.0625rem;
  --t-md:1.15rem;
  --t-lg:1.375rem;
  --t-xl:1.75rem;
  --t-2xl:2.25rem;
  --t-3xl:3rem;

  --lh-tight:1.05;
  --lh-snug:1.3;
  --lh-body:1.66;

  --track-head:.005em;
  --track-label:.14em;   /* the mono label letterspacing */
  --track-nav:.08em;

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

  /* ---------------------------------------------------------------------
     STRUCTURE
     Square corners throughout — this is a drawing, not an app. The only
     radius on the site is the brand mark.
     --------------------------------------------------------------------- */
  --r:0px;
  --r-sm:2px;
  --r-mark:3px;

  --rule:1px solid var(--line);
  --rule-2:2px solid var(--ink);

  --wrap:1180px;
  --measure:66ch;

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