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

   Industrial / job-site identity: safety orange, charcoal steel, concrete
   gray, hazard-yellow accent. Condensed Oswald display + Inter body.

   Every other stylesheet reads from here. Variable NAMES are kept stable so
   the component CSS and the inline styles across the templates keep working;
   only the VALUES change. DO NOT put component styles in this file.
   ========================================================================= */

:root{

  /* ---------------------------------------------------------------------
     COLOR
     Charcoal steel is the dark field (header, hero, footer, bands).
     Concrete gray carries the reading surfaces.
     Safety orange marks anything clickable or important.
     Hazard yellow is used SPARINGLY, for caution-stripe accents only.
     --------------------------------------------------------------------- */
  /* charcoal / steel ramp — mapped onto the old --deep-* names */
  --deep-950:#111214;    /* deepest — footer / strip */
  --deep-900:#16181B;    /* the dark field / hero / ink */
  --deep-800:#1F2226;    /* raised dark panels */
  --deep-700:#2C3036;    /* steel — borders on dark, hovers */

  /* safety / hazard orange */
  --acc-500:#F2651E;
  --acc-600:#D8500F;
  --acc-ink:#160B03;      /* near-black text placed on top of the orange */

  /* hazard yellow — accent stripes only, never large fills */
  --hazard:#F5C400;
  --hazard-ink:#1A1400;

  /* concrete surfaces — mapped onto the old cream names */
  --cream:#EAE6DF;        /* page surface — warm concrete */
  --cream-2:#DED9D0;      /* raised panels / bands */
  --line:#C6C0B4;         /* hairlines on concrete */
  --line-heavy:#16181B;   /* the heavy boxy borders */
  --white:#fff;

  --ink:#16181B;          /* headings */
  --ink-2:#3B4046;        /* body copy */
  --ink-3:#6C7178;        /* captions, meta */

  --on-deep:#CBCFD4;      /* body copy on the dark field */
  --on-deep-2:#8B9199;    /* meta on the dark field */
  --on-deep-line:rgba(255,255,255,.12);

  --ok:#3E8E5A;

  /* diagram-only colors — legacy, unused by the industrial UI */
  --dia-water:#F2651E;
  --dia-vapor:#F5C400;
  --dia-wood:#8B9199;

  /* ---------------------------------------------------------------------
     TYPE
     Oswald — condensed, uppercase-friendly display. Headings, hero, nav.
     Inter  — body. Neutral, legible, sturdy at small sizes.
     --------------------------------------------------------------------- */
  --slab:"Oswald","Arial Narrow",Impact,sans-serif;     /* display (name kept) */
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --t-xs:.78rem;
  --t-sm:.9rem;
  --t-base:1.02rem;
  --t-md:1.14rem;
  --t-lg:1.4rem;
  --t-xl:2rem;
  --t-2xl:2.6rem;

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

  --track-tight:.005em;
  --track-label:.18em;

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

  /* ---------------------------------------------------------------------
     STRUCTURE — boxy and heavy. Small radii, hard shadows.
     --------------------------------------------------------------------- */
  --r:2px;
  --r-sm:2px;
  --r-lg:3px;

  --sh:6px 6px 0 rgba(22,24,27,.14);
  --sh-sm:3px 3px 0 rgba(22,24,27,.12);

  --wrap:1220px;
  --measure:64ch;

  --focus:3px solid var(--acc-500);

  /* diagonal hazard caution-stripe — the signature motif */
  --stripe: repeating-linear-gradient(-45deg,
             var(--acc-500) 0 20px, var(--deep-900) 20px 40px);
  --stripe-y: repeating-linear-gradient(-45deg,
             var(--hazard) 0 20px, var(--deep-900) 20px 40px);
}