/* ==========================================================================
   Integrated Septic Solutions — design tokens
   Colors sampled from existing brand assets:
     logo PNG, business card v9, brochure v8
   Nothing here is tied to the current logo mark; a new mark can drop in.
   ========================================================================== */

:root {

  /* --- Brand color, sampled ------------------------------------------- */

  /* Brochure cover ground. Darkest brand value, used for full-bleed
     dark sections and the site footer. */
  --iss-navy-deep:   #1E3056;

  /* Wordmark navy + first logo dot. Primary brand color. Links, headings. */
  --iss-navy:        #20409A;

  /* Mid-progression blues from the logo dot sequence. */
  --iss-blue-700:    #385AA8;
  --iss-blue-600:    #337AA5;
  --iss-blue-500:    #5090B0;
  --iss-blue-400:    #61A9C1;

  /* Brochure footer band. Brightest usable accent. */
  --iss-accent:      #5997D7;

  /* Lightest logo dot. Tints and quiet fills only — fails contrast as text. */
  --iss-sky:         #B0DBED;


  /* --- Neutrals ------------------------------------------------------- */
  /* Warmed slightly toward the brand navy rather than pulled from a
     generic gray ramp, so they sit with the blues instead of beside them. */

  --iss-ink:         #232C3C;   /* body text */
  --iss-ink-muted:   #55637A;   /* secondary text, captions */
  --iss-rule:        #D5DEE8;   /* hairlines, table borders */
  --iss-rule-soft:   #E7EDF3;   /* interior table rules */
  --iss-paper-alt:   #F3F7FA;   /* alternating section ground */
  --iss-paper:       #FFFFFF;


  /* --- Semantic mapping ----------------------------------------------- */
  /* Components reference these, never the raw values above. Retheming
     means editing this block only. */

  --color-text:            var(--iss-ink);
  --color-text-muted:      var(--iss-ink-muted);
  --color-heading:         var(--iss-navy-deep);
  --color-link:            var(--iss-navy);
  --color-link-hover:      var(--iss-blue-600);

  --color-bg:              var(--iss-paper);
  --color-bg-alt:          var(--iss-paper-alt);
  --color-bg-inverse:      var(--iss-navy-deep);
  --color-text-inverse:    #FFFFFF;
  --color-text-inverse-mut:#B9C6DA;

  --color-border:          var(--iss-rule);
  --color-border-soft:     var(--iss-rule-soft);
  --color-focus:           var(--iss-accent);


  /* --- Type ------------------------------------------------------------ */
  /* Georgia and Franklin Gothic are the established print pair.
     Georgia ships on effectively every desktop and mobile OS.
     Libre Franklin is an open Franklin Gothic revival.

     Georgia is display only. Its numerals are old-style (1, 3, 4, 7, 9
     carry descenders), which reads badly in spec tables and model names
     like CEN5. All numeric and tabular content uses Libre Franklin. */

  --font-display: Georgia, "Times New Roman", serif;
  --font-text:    "Libre Franklin", "Franklin Gothic Book", "Helvetica Neue",
                  Arial, sans-serif;

  /* Modular scale, ratio 1.25, base 1.0625rem (17px).
     Headings are fluid between the mobile and desktop ends of the scale. */

  --size-caption: 0.8125rem;   /* 13px */
  --size-small:   0.9375rem;   /* 15px */
  --size-body:    1.0625rem;   /* 17px */
  --size-lead:    1.3125rem;   /* 21px */

  --size-h4:      1.3125rem;                          /* 21px */
  --size-h3:      clamp(1.375rem, 1.15rem + 1.0vw, 1.6875rem);   /* 22–27 */
  --size-h2:      clamp(1.625rem, 1.25rem + 1.7vw, 2.0625rem);   /* 26–33 */
  --size-h1:      clamp(2.0rem,   1.45rem + 2.6vw, 2.625rem);    /* 32–42 */
  --size-display: clamp(2.375rem, 1.5rem + 4.0vw, 3.25rem);      /* 38–52 */

  --leading-tight: 1.15;   /* display headings */
  --leading-snug:  1.3;    /* subheads */
  --leading-body:  1.65;   /* sans body */
  --leading-loose: 1.75;   /* serif passages, which need more */

  --tracking-tight: -0.015em;   /* large Georgia headings only */
  --tracking-normal: 0;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-bold:   600;


  /* --- Layout ---------------------------------------------------------- */

  --container:       75rem;    /* 1200px — standard inner width */
  --container-wide:  87.5rem;  /* 1400px — tables, resource grids */
  --container-text:  44rem;    /* 704px — prose */
  --measure:         66ch;     /* hard cap on line length */

  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;

  /* Vertical rhythm for full-bleed sections. */
  --section-pad: clamp(3rem, 7vw, 6rem);

  --radius-sm: 2px;
  --radius:    4px;

  --border-hair: 1px solid var(--color-border);


  /* --- Breakpoints ------------------------------------------------------ */
  /* Reference only. CSS custom properties cannot be used inside @media,
     so the literal values are repeated in base.css. Keep in sync.
       sm  40rem  / 640px   — phone landscape, small tablet
       md  60rem  / 960px   — tablet landscape, nav switches here
       lg  80rem  / 1280px  — desktop
   */
}