/* =========================================================================
   SOUTHERN OCEAN FOUNDATIONS AND WATERPROOFING
   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 100+ generated pages.

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

:root{

  /* ---------------------------------------------------------------------
     COLOR
     Deep marine is the brand field (header, hero, footer).
     Cream carries the reading content.
     One warm orange marks anything clickable or important.
     --------------------------------------------------------------------- */
  --deep-950:#0A2833;
  --deep-900:#0E3341;
  --deep-800:#134152;
  --deep-700:#1B586D;

  --acc-500:#EC7A3C;
  --acc-600:#D4652A;
  --acc-ink:#22150C;      /* text placed on top of the orange */

  --cream:#FAF7F2;
  --cream-2:#F1ECE3;
  --line:#E2DACC;
  --white:#fff;

  --ink:#152A33;          /* headings */
  --ink-2:#4A5F69;        /* body copy */
  --ink-3:#7B8D96;        /* captions, meta */

  --on-deep:#B8D2DC;      /* body copy on the dark field */
  --on-deep-2:#7FA5B4;    /* meta on the dark field */
  --on-deep-line:rgba(184,210,220,.18);

  --ok:#2F7D5B;

  /* diagram-only colors — never used in UI chrome */
  --dia-water:#4FA9C6;
  --dia-vapor:#8FD3E4;
  --dia-wood:#C9A97B;

  /* ---------------------------------------------------------------------
     TYPE
     Bitter  — slab serif, headings. Sturdy rather than elegant.
     Public Sans — body. Neutral, legible at small sizes.
     --------------------------------------------------------------------- */
  --slab:"Bitter",Georgia,"Times New Roman",serif;
  --sans:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

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

  --lh-tight:1.16;
  --lh-snug:1.35;
  --lh-body:1.68;

  --track-tight:-.018em;
  --track-label:.16em;

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

  /* ---------------------------------------------------------------------
     STRUCTURE
     --------------------------------------------------------------------- */
  --r:10px;
  --r-sm:6px;
  --r-lg:16px;

  --sh:0 2px 6px rgba(10,40,51,.06), 0 14px 40px rgba(10,40,51,.09);
  --sh-sm:0 1px 3px rgba(10,40,51,.07);

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

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