/* =========================================================================
   LBI BULKHEAD REPAIRS AND SERVICING
   tokens.css — the single source of truth for the visual system.

   Design direction: TECHNICAL / SPEC-SHEET. This is marine construction —
   sheet pile, tie-backs, tidelands, linear feet. The look is engineered and
   precise: a cool "chart paper" ground, deep navy structure, a marine-blue
   for water and links, and a single signal-amber that marks anything the
   reader can act on. Figures are set in mono, like a spec sheet.

   Every other stylesheet reads from here. DO NOT put component styles in this
   file. Only tokens.
   ========================================================================= */

:root{

  /* ---------------------------------------------------------------------
     COLOR
     Deep navy is the structural field (header, hero, footer, dark bands).
     A cool paper carries the reading content.
     Marine blue is water + links. Signal amber marks the actionable.
     --------------------------------------------------------------------- */
  --navy-950:#081521;
  --navy-900:#0C1E2E;
  --navy-800:#12304A;
  --navy-700:#1B4260;

  --steel-700:#0F547E;    /* marine blue — links, water */
  --steel-600:#146089;
  --steel-500:#2E7FAE;    /* diagram water highlight */

  --signal-500:#F2B705;   /* signal amber — CTAs, markers, rules */
  --signal-600:#D89E00;
  --signal-ink:#1A1400;   /* text placed on top of the amber */

  --paper:#EEF2F5;        /* the reading ground (cool, charted) */
  --paper-2:#E3E9ED;      /* recessed panels */
  --line:#CDD8DF;         /* hairlines on paper */
  --white:#FFFFFF;

  --ink:#0E1E2A;          /* headings */
  --ink-2:#3C505C;        /* body copy */
  --ink-3:#69808D;        /* captions, meta, units */

  --on-navy:#B9CCD9;      /* body copy on the dark field */
  --on-navy-2:#7C97A8;    /* meta on the dark field */
  --on-navy-line:rgba(185,204,217,.16);

  --ok:#2F7D5B;
  --warn:#C25A28;

  /* diagram-only colors — never used in UI chrome */
  --dia-water:#2E7FAE;
  --dia-water-2:#123B54;
  --dia-soil:#5E6B54;
  --dia-vinyl:#C9D3D8;
  --dia-timber:#B58A57;

  /* ---------------------------------------------------------------------
     TYPE
     Space Grotesk — technical display face for headings.
     IBM Plex Sans — body. Engineered, legible.
     IBM Plex Mono — figures, prices, units, spec labels.
     --------------------------------------------------------------------- */
  --display:"Space Grotesk","Segoe UI",system-ui,sans-serif;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --t-xs:.78rem;
  --t-sm:.9rem;
  --t-base:1.0625rem;
  --t-md:1.14rem;
  --t-lg:1.4rem;
  --t-xl:1.95rem;
  --t-2xl:2.5rem;

  --lh-tight:1.1;
  --lh-snug:1.32;
  --lh-body:1.66;

  --track-tight:-.02em;
  --track-label:.2em;      /* wide tracking on the mono spec labels */

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

  /* ---------------------------------------------------------------------
     STRUCTURE
     Sharper than the reference build — squared corners read as engineered.
     --------------------------------------------------------------------- */
  --r:4px;
  --r-sm:2px;
  --r-lg:8px;

  --sh:0 1px 2px rgba(8,21,33,.08), 0 12px 34px rgba(8,21,33,.10);
  --sh-sm:0 1px 2px rgba(8,21,33,.10);

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

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

  /* ---------------------------------------------------------------------
     COMPATIBILITY ALIASES
     The admin, portal, and the contractors / blog CSS blocks were authored
     against the reference build's token names. These aliases map those names
     onto this site's palette so every surface renders on-brand without
     touching frozen logic. New template code should use the names above.
     --------------------------------------------------------------------- */
  --deep-950:var(--navy-950);
  --deep-900:var(--navy-900);
  --deep-800:var(--navy-800);
  --deep-700:var(--navy-700);
  --acc-500:var(--signal-500);
  --acc-600:var(--signal-600);
  --acc-ink:var(--signal-ink);
  --cream:var(--paper);
  --cream-2:var(--paper-2);
  --on-deep:var(--on-navy);
  --on-deep-2:var(--on-navy-2);
  --on-deep-line:var(--on-navy-line);
  --slab:var(--display);
}