/* ============================================================
   Spirit of Texas Windows and Doors LLC — Design Tokens
   Source of truth: brand-system.md §1 (color) + §2 (type)
   NOTE (brand caveat): every hex is reasoned from the badge logo
   DNA (Texas-flag red / frontier gold / midnight navy). Sample the
   real logo file and replace these constants before final ship.
   ============================================================ */

:root {
  /* ---------- Core palette — RED-FORWARD, sampled off the IG badge ----------
     Brand red = the punchy vermilion sampled from the logo ring (≈#E53223).
     This is now the loud, Marlboro-grade lead color for the whole site. */
  --sot-red:        #E12B1E;  /* Branding-Iron Red — THE brand color (logo ring ≈ #E53223) */
  --sot-red-hot:    #F5382A;  /* Ignition Red — bright hover / accents on dark */
  --sot-red-deep:   #B81C12;  /* Ember Red — CTA hover/pressed, red borders */
  --sot-red-ink:    #8A1109;  /* Branded-Iron — deep red section floors / gradients */
  --sot-red-black:  #560A05;  /* Charred Red — deepest red vignette */
  --sot-cream:      #F5EAD6;  /* Saddle Cream — warm relief base, "honest daylight" */
  --sot-gold:       #E0A83F;  /* Frontier Gold — line/ornament + accents on red */
  --sot-gold-deep:  #946A22;  /* Aged Brass — the readable gold on cream (>=19px/bold) */
  --sot-navy:       #16212F;  /* Midnight Navy — grounding dark (footer, secondary) */
  --sot-navy-ink:   #0D141F;  /* Ink — max-contrast text on cream/white */
  --sot-white:      #FCFAF5;  /* Bone White — warm canvas, never clinical #FFF */
  --sot-star:       #FFFFFF;  /* Star White — star + rider line-art on red */
  --mascot-mask:    url('../img/mascot-mask.png');  /* vaquero-on-horse silhouette, extracted from the badge */

  /* ---------- Warm-gray ramp (tuned to cream, never blue-gray) ---------- */
  --n-900: #1C1B18;  /* body text on cream */
  --n-700: #4A453C;  /* secondary text */
  --n-500: #7A7264;  /* muted / captions */
  --n-300: #CFC6B4;  /* hairlines, disabled */
  --n-100: #EFE8D8;  /* card edges on cream */

  /* ---------- Semantic tokens ---------- */
  --brand-primary: var(--sot-red);
  --bg-canvas:     var(--sot-cream);
  --bg-elevated:   var(--sot-white);
  --bg-inverse:    var(--sot-navy);
  --text-primary:  var(--sot-navy-ink);
  --text-secondary:var(--n-700);
  --text-muted:    var(--n-500);
  --text-on-red:   var(--sot-white);
  --text-on-navy:  var(--sot-cream);
  --accent-line:   var(--sot-gold);
  --cta:           var(--sot-red);
  --cta-hover:     var(--sot-red-deep);
  --success:       #2F7D46;  /* Live-Oak Green — "Licensed & Insured" checks, muted */
  --warning:       var(--sot-gold-deep);  /* honest seasonal urgency only */
  --focus-ring:    #3E6DBF;  /* true blue, distinct from navy — a11y focus */

  /* ---------- Type families (brand-system §2) ---------- */
  --font-display: "Zilla Slab", "Sentinel", "Roboto Slab", Rockwell, Georgia, serif;
  --font-body:    "Libre Franklin", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ---------- Type scale (1.250 major-third, 16px base) ---------- */
  /* Display tiers use clamp() so mobile scales ~30% down, hero <=3 lines */
  --fs-display-xl: clamp(2.55rem, 6.2vw, 3.815rem); /* 61px desktop */
  --fs-display-lg: clamp(2.20rem, 5.0vw, 3.052rem); /* 49px */
  --fs-h1:         clamp(1.85rem, 4.0vw, 2.441rem); /* 39px */
  --fs-h2:         clamp(1.55rem, 3.2vw, 1.953rem); /* 31px */
  --fs-h3:         clamp(1.30rem, 2.4vw, 1.563rem); /* 25px */
  --fs-eyebrow:    0.875rem;   /* 14px caps +0.12em */
  --fs-body-lg:    1.25rem;    /* 20px lead */
  --fs-body:       1rem;       /* 16px */
  --fs-small:      0.875rem;   /* 14px captions/disclaimers */
  --fs-price:      clamp(1.5rem, 3.5vw, 1.9rem); /* published ranges, tnum */

  --lh-tight:   1.05;
  --lh-heading: 1.15;
  --lh-body:    1.6;

  --fw-regular: 400;
  --fw-medium:  600;
  --fw-bold:    700;

  /* ---------- Spacing scale (8px base rhythm) ---------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;
  --section-y: clamp(3.5rem, 8vw, 6.5rem); /* vertical section padding */
  --gutter:    clamp(1.25rem, 5vw, 2.5rem); /* page side gutter */
  --maxw:      1200px;         /* content max width */
  --maxw-narrow: 760px;        /* prose column */

  /* ---------- Radii ---------- */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-pill: 999px;

  /* ---------- Elevation (flat frontier — soft, no glow) ---------- */
  --shadow-sm: 0 1px 2px rgba(14, 22, 38, 0.06);
  --shadow-md: 0 6px 20px rgba(14, 22, 38, 0.08);
  --shadow-lg: 0 18px 48px rgba(14, 22, 38, 0.12);

  /* ---------- Motion ("presses in and settles" — no bounce) ---------- */
  --ease-settle: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:  160ms;
  --dur-med:   300ms;
  --dur-slow:  600ms;

  /* ---------- Layout constants ---------- */
  --nav-h: 68px;
  --sticky-cta-h: 60px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-med: 0ms; --dur-slow: 0ms; }
}