/* ============================================================================
   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 — 4 categorical slots, ASSIGN IN THIS ORDER, NEVER CYCLE.
     Re-derived 2026-08-16 after measuring the previous 2-slot pair with the
     dataviz validator. The old --c-a/--c-b were green and orange and NOTHING
     ELSE, and green-vs-orange is the single worst pair in existence for
     protanopia: they measured 5.8 apart in OKLab dE100, where 6.0 is the floor
     at which even direct labels can rescue a pair. A red-blind reader saw one
     colour. (--c-a also failed the chroma floor at 0.095 — it read gray.)

     The fix is the ORDER, not the size. Green-vs-orange caps at dE 6.5 no matter
     how the two are re-stepped — that is structural, not a bad choice of hex. So
     a slate blue is inserted as slot 2, which sits >=15 from both, and the two
     hues that cannot be separated are never adjacent in the assignment order.
     Cedar is UNCHANGED. Green moved dE 0.8 (imperceptible) to clear the chroma
     floor.

     Validated with dataviz/scripts/validate_palette.js against --card #F2F4F1
     (light) and --band #0E1A17 (dark). Both sets: ALL CHECKS PASS.
     Worst adjacent pair light: --c-b vs --c-a, dE 15.1 deutan / 17.4 normal.

     THE RULE THIS BUYS YOU, AND THE ONE IT DOES NOT: with the order below,
     adjacent series are separable. Slots 1 and 3 (green and cedar) still are
     NOT — so a two-series chart must never use --c-a with --c-c. Use --c-a with
     --c-b, or put the two series in separate frames (small multiples), which
     needs no colour discrimination at all. ---- */
  --c-a: #016C4B;   --c-a-dark: #2FA872;   /* evergreen  — slot 1 */
  --c-b: #4772B1;   --c-b-dark: #6E96D4;   /* slate blue — slot 2 (new) */
  --c-c: #A85E1C;   --c-c-dark: #C97722;   /* cedar      — slot 3 */
  --c-d: #765092;   --c-d-dark: #A07CC0;   /* plum       — slot 4 (new) */

  /* ---- 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. */