/* ============================================================================
   ZENITH ROOFING & EXTERIORS — BRAND TOKEN LAYER
   Derived from: Brand & Market System v2.0 / Lake Tapps, WA / Aug 2026
   Sections 006.2 (Colour), 006.3 (Typography), 006.4 (Voice)

   DAYLIGHT-PRIMARY HYBRID.
   The brand pack specifies a dark-native system. Zenith presents to homeowners
   outdoors, where a near-black screen becomes a mirror. So: brand hues, brand
   type, brand voice — carried on a light reading surface, with Deep Evergreen
   reserved for deliberate dark bands (header, hero, section covers, totals,
   footer). Small dark areas keep the brand feel without the daylight glare.

   Every ratio below is COMPUTED, not estimated — the brand pack's own standard.
   Do not put a raw hex on a Zenith surface. Use a token.
   ========================================================================= */

:root{
  /* ---- 006.2 RAW PALETTE — do not use directly; use the roles below ---- */
  --z-void:          #080F0D;  /* deepest surface */
  --z-deep:          #0E1A17;  /* primary dark panel */
  --z-panel:         #12211D;  /* raised dark surface */
  --z-evergreen:     #1B3A2F;  /* brand green */
  --z-moss:          #3E6B52;  /* secondary green */
  --z-cedar:         #B5622F;  /* accent — LARGE TEXT / RULES / FILLS ONLY (3.99:1) */
  --z-cedar-deep:    #8F4A21;  /* accessible cedar — ANY type under 18pt (5.99:1) */
  --z-ember:         #D98A4A;  /* DARK FIELDS ONLY — fails on light (2.47:1) */
  --z-slate:         #3D4B4F;  /* secondary text on light (8.19:1 AAA) */
  --z-wet-slate:     #7C8D8F;  /* DARK FIELDS ONLY — fails on light tints (2.93:1) */
  --z-mist:          #B9C4BF;  /* DARK FIELDS ONLY — default reading colour on dark */
  --z-rainier-white: #F2F4F1;  /* never pure white */
  --z-ink:           #0A1310;  /* never pure black */

  /* ---- LIGHT SURFACES (the working + presenting surface) ---- */
  --bg:            #EAEEE9;
  --card:          #F2F4F1;
  --raised:        #E1E7E1;
  --line:          #CBD3CB;
  --line-strong:   #A9B5AC;

  /* ---- TEXT ON LIGHT ---- */
  --text:          #0A1310;   /* Ink       — 17.05:1 AAA */
  --text-2:        #3D4B4F;   /* Slate     —  8.19:1 AAA */
  --text-3:        #5C6B64;   /* muted     —  5.60:1 AA  */
  --heading:       #1B3A2F;   /* Evergreen — 11.22:1 AAA */

  /* ---- ACCENT ON LIGHT ---- */
  --accent:        #8F4A21;   /* Cedar Deep — links, small accents (5.99:1) */
  --accent-lg:     #B5622F;   /* Cedar — 18pt+, rules, section numbers, UI fills */
  --accent-soft:   #F6EBDF;

  /* ---- DARK BANDS (header, hero, section covers, totals, footer) ---- */
  --band:          #0E1A17;
  --band-2:        #12211D;
  --band-deep:     #080F0D;
  --band-green:    #1B3A2F;
  --band-text:     #F2F4F1;   /* 16.11:1 AAA */
  --band-text-2:   #B9C4BF;   /* Mist       9.93:1 AAA */
  --band-muted:    #7C8D8F;   /* Wet Slate  5.14:1 AA — mono labels on dark */
  --band-accent:   #D98A4A;   /* Ember      6.52:1 AA */
  --band-line:     #1E332C;
  --band-line-2:   #264138;

  /* ---- STATUS — computed against the page AND their own tints ---- */
  --ok:            #1B6B48;   --ok-bg:      #E3EFE7;   /* 5.48:1 on tint */
  --warn:          #8A4A12;   --warn-bg:    #F6EBDF;   /* 5.82:1 on tint */
  --danger:        #A3301F;   --danger-bg:  #F7E6E2;   /* 5.79:1 on tint */
  --info:          #2C5468;   --info-bg:    #E4EDF2;   /* 6.87:1 on tint */
  --neutral:       #1B3A2F;   --neutral-bg: #E6EBE7;   /* 10.28:1 on tint */

  --ok-on-dark:     #2FA872;
  --warn-on-dark:   #C97722;
  --danger-on-dark: #E47962;

  /* ---- CHART PALETTE (brand chart tokens, CVD-validated) ---- */
  --c-a: #1B6B48;   --c-a-dark: #2FA872;
  --c-b: #A85E1C;   --c-b-dark: #C97722;

  /* ---- 006.3 TYPOGRAPHY ---- */
  --z-disp:  'Archivo','Arial Black','Helvetica Neue',Helvetica,Arial,sans-serif;
  --z-body:  'IBM Plex Sans','Segoe UI','Helvetica Neue',Helvetica,Arial,sans-serif;
  --z-mono:  'IBM Plex Mono',Consolas,'Courier New',ui-monospace,Menlo,monospace;

  --tap: 44px;
}

/* DISPLAY — Archivo ExtraBold 800, tracking -2.5%, sentence case.
   ALL-CAPS IS RESERVED FOR THE WORDMARK. Never letterspace lowercase. */
.z-display{
  font-family:var(--z-disp); font-weight:800; letter-spacing:-0.025em;
  color:var(--heading); line-height:1.15;
}

/* DATA / LABEL — IBM Plex Mono 500, +0.14em. Section numbers, timeline markers,
   zones, specs, prices, table headers, source lines. This is what makes Zenith
   read as engineered rather than decorated. NEVER BELOW 10PX. */
.z-label{
  font-family:var(--z-mono); font-weight:500; letter-spacing:0.14em;
  text-transform:uppercase; font-size:11px; color:var(--text-2);
}
.z-data{ font-family:var(--z-mono); font-weight:500; letter-spacing:0.06em; }
.z-price,.z-num{ font-family:var(--z-mono); font-weight:500; font-variant-numeric:tabular-nums; }
.z-section-no{ font-family:var(--z-mono); font-weight:500; letter-spacing:0.14em;
  color:var(--accent-lg); font-size:11px; }

/* BODY — IBM Plex Sans 400/500. 16px min on web, line-height 1.6,
   measure capped at 70 characters. */
.z-measure{ max-width:70ch; }

/* DARK BAND — the brand's native surface, used deliberately and sparingly */
.z-band{ background:var(--band); color:var(--band-text-2); }
.z-band h1,.z-band h2,.z-band h3,.z-band .z-display{ color:var(--band-text); }
.z-band .z-label,.z-band .z-data{ color:var(--band-muted); }
.z-band a,.z-band .z-accent{ color:var(--band-accent); }
.z-band hr,.z-band .z-rule{ border-color:var(--band-line-2); }

/* CEDAR EDGE RULE — the print signature, per 006.6 Applications */
.z-edge{ border-left:3px solid var(--accent-lg); padding-left:16px; }
.z-keyline{ border-top:3px solid var(--heading); }

/* GUARDRAILS
   Cedar #B5622F on white is 3.99:1 — AA-large only. The brand pack names this
   as "the rule vendors most often break." Anything under 18pt uses --accent.
   Ember, Mist and Wet Slate are dark-field colours. They fail on light and
   must never appear outside .z-band. */