/* ============================================================================
   econo-roofing.com — DESIGN TOKENS  (Direction B "Field Guide", ratified 2026-07-15)
   Single source of truth. No component may invent a value. See design/direction.md.

   This file replaces the token layers of homepage.min.css / shared.min.css /
   apple-refinements.min.css. The LEGACY ALIASES block at the bottom remaps every
   old token name onto Direction B values, so any page still referencing an old
   var (in inline styles or un-migrated CSS) snaps into the new system instead of
   breaking — and the off-palette / soft-shadow / big-radius / low-contrast-grey
   audit patterns die at the token source.
   ============================================================================ */

:root {
  /* ---- PALETTE — one signal red, deep charcoal, white. Nothing else. ---- */
  --red:        #d5160c;   /* the ONE signal. CTA + emphasis only, never decoration */
  --red-deep:   #a81009;   /* hover/active of red */
  --red-ink:    #7a0c06;   /* red text that must pass AA on white (4.5:1) */
  --ink:        #0f0f0f;   /* near-black — primary text, dark sections */
  --ink-2:      #2b2b2b;   /* secondary text on light */
  --ink-3:      #4a4a4a;   /* tertiary text on light — AA-safe (7.0:1 on white) */
  --paper:      #ffffff;   /* primary background */
  --paper-2:    #f4f4f4;   /* section shading (NOT a card fill) */
  --paper-3:    #e8e8e8;   /* deepest light shade, dividers on light */
  --hairline:   rgba(0,0,0,.14);   /* 1px rules on light */
  --hairline-2: rgba(0,0,0,.22);   /* heavier rules */
  --on-dark:    #ffffff;                 /* text on ink sections */
  --on-dark-2:  rgba(255,255,255,.82);   /* secondary text on ink — AA-safe */
  --on-dark-3:  rgba(255,255,255,.62);   /* tertiary on ink — large text only */
  --hairline-d: rgba(255,255,255,.18);   /* rules on ink */

  /* ---- TYPE — self-hosted Barlow SC (display) + Barlow (body). No webfont adds. ---- */
  --ff-display: "Barlow Semi Condensed","Barlow",system-ui,-apple-system,sans-serif;
  --ff-body:    "Barlow",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  /* Barlow body weights loaded: 400/500/700 · Barlow SC display weights loaded: 600/700/800 */
  --fw-body:    400;
  --fw-medium:  500;
  --fw-strong:  700;   /* body bold */
  --fw-semi:    600;   /* display semi — eyebrows */
  --fw-heavy:   700;   /* display bold — sub-heads */
  --fw-display: 800;   /* display heavy — hero/H1/H2 */

  /* type scale — confident, big display steps; body sized for scan-reading */
  --fs-hero:    clamp(46px, 7vw, 92px);
  --fs-h1:      clamp(34px, 4.6vw, 58px);
  --fs-h2:      clamp(26px, 3.2vw, 40px);
  --fs-h3:      clamp(19px, 2vw, 24px);
  --fs-h4:      clamp(16px, 1.4vw, 18px);
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-xs:      12.5px;
  --fs-eyebrow: 12px;

  --lh-display: .98;
  --lh-tight:   1.15;
  --lh-body:    1.6;
  --lh-loose:   1.7;
  --tracking-display: -.015em;
  --tracking-tight:   -.01em;
  --tracking-eyebrow: .12em;
  --tracking-caps:    .06em;

  /* ---- SPACE — 8-based, confident density ---- */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;
  --sp-side:  clamp(20px, 5vw, 40px);   /* page gutter */
  --sp-sec:   clamp(56px, 8vw, 120px);  /* vertical section rhythm */
  --sp-sec-sm: clamp(40px, 5vw, 72px);
  --sp-card:  clamp(20px, 3vw, 32px);   /* card interior padding */
  --sp-gap:   clamp(16px, 2.5vw, 24px); /* grid gaps */

  /* ---- FORM — sharp and solid. 2px radius max. ---- */
  --r:      2px;   /* everything that has a radius */
  --r-sm:   2px;
  --r-lg:   2px;
  --r-pill: 2px;   /* NO pills — pills are killed */
  --border:      1.5px solid var(--ink);
  --border-hair: 1px solid var(--hairline);
  --border-red:  1.5px solid var(--red);

  /* ---- ELEVATION — photo & border carry weight. Soft shadows are killed. ---- */
  --shadow:      none;
  --shadow-sm:   none;
  --shadow-md:   none;
  --shadow-lg:   none;
  --lift:        2px 2px 0 var(--ink);   /* hard-offset drop line — interactive hover only */
  --lift-red:    2px 2px 0 var(--red);
  --lift-lg:     3px 3px 0 var(--ink);

  /* ---- MOTION — quick, no bounce ---- */
  --dur-fast: .12s;
  --dur:      .18s;
  --dur-slow: .32s;
  --ease:     cubic-bezier(.2, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* ---- LAYOUT ---- */
  --nav-h:      64px;
  --nav-h-mob:  58px;
  --maxw:       1180px;   /* content max width */
  --maxw-text:  760px;    /* prose measure */
  --maxw-wide:  1320px;

  /* ---- FOCUS RING (visible, AA) — used sitewide on :focus-visible ---- */
  --ring: 0 0 0 3px rgba(213,22,12,.45), 0 0 0 1.5px var(--paper);

  /* ---- Z-INDEX SCALE ---- */
  --z-base: 1; --z-sticky: 100; --z-nav: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500;

  /* ---- BREAKPOINTS (reference — CSS can't use vars in @media; documented here) ----
     mobile base ≤479 · sm 480 · md 768 · lg 1024 · xl 1280 */

  /* ========================================================================
     LEGACY ALIASES — remap every old token name onto Direction B values so
     un-migrated inline styles/CSS snap into the system. These KILL the audit's
     systemic patterns at the source:
       cream/trust-blue/navy → ink/paper (off-palette dies)
       --sh* soft shadows    → none        (soft-shadow cards die)
       --r/--r-card 12-20px  → 2px         (big radii die)
       --grey text #9c9c9c   → ink-3       (AA contrast failure dies)
     ======================================================================== */
  --red-glow:   transparent;              /* was rgba(213,22,12,.18) glow — killed */
  --ink-1:      var(--ink);
  --navy:       var(--ink);               /* off-palette navy → ink */
  --black:      var(--ink);
  --white:      var(--paper);
  --bg:         var(--paper);
  --bg-2:       var(--paper-2);
  --bg-3:       var(--paper-3);
  --grey:       var(--ink-3);             /* #9c9c9c (AA FAIL 2.75:1) → ink-3 (7.0:1) */
  --grey-light: var(--paper-2);
  --grey-mid:   var(--paper-3);
  --grey-text:  var(--ink-3);
  --text-soft:  var(--ink-2);
  --text-muted: var(--ink-3);
  --line:       var(--hairline);
  --cream:      var(--paper-2);           /* off-palette cream → paper-2 */
  --cream-deep: var(--paper-3);
  --trust-blue: var(--ink);               /* off-palette Apple blue → ink */
  --trust-blue-tint: var(--paper-2);
  --steel:      var(--ink-3);
  --font:       var(--ff-body);
  --header-h:   var(--nav-h);
  --nav-offset: calc(var(--nav-h) + 12px);
  --r-card:     var(--r);                 /* clamp(14px,2.5vw,20px) → 2px */
  --sp-card-lg: var(--sp-card);
  --ease-spring: var(--ease);             /* kill bounce */
  --ease-snap:   var(--ease);
  --dur-base:    var(--dur);
  --sh:       none;  --sh-card: none;  --sh-lift: none;  --sh-up: none;
  --shadow-xs: none; --shadow-xl: none;  --shadow-red: none; --shadow-red-lg: none;
}

/* reduced motion — honor the OS setting; content is never hidden by animation */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: .001s; --dur: .001s; --dur-slow: .001s; }
}