:root {
  /* ============================================================
     ROOF WRANGLERS — DESIGN TOKENS
     Provisional brand [CONFIRM with Harold]. Swap palette + type
     here only; base.css and components.css reference these names.
     Direction: rugged + trustworthy. Slate navy = stability/trust,
     rust/amber = action (high-converting on home-services CTAs).
     ============================================================ */

  /* --- Brand: slate navy (primary, structural, trust) --- */
  --color-navy: #1b2a38;        /* headings, dark sections, brand */
  --color-navy-deep: #131f29;   /* footer, topbar, deepest panels */
  --color-navy-soft: #22303c;   /* lighter slate, links */
  --color-navy-line: #33424f;   /* hairlines on dark surfaces */

  /* --- Accent: rust / amber (CTA + energy) --- */
  --color-rust: #e0701f;        /* primary CTA */
  --color-rust-deep: #c25e14;   /* CTA hover */
  --color-amber: #f08a24;       /* lighter accent / highlights */
  --color-amber-soft: #f6a95a;  /* accent on dark backgrounds */
  --color-amber-tint: #f9d2ab;  /* faint accent on dark */

  /* --- Neutrals: warm, not cold/sterile --- */
  --color-ink: #20262b;         /* body text */
  --color-cream: #f7f3ec;       /* warm off-white background */
  --color-paper: #ffffff;
  --color-line: #e4ddd1;        /* warm borders */
  --color-muted: #5c6670;       /* secondary text */
  --color-steel: #8a98a4;       /* muted slate on dark */
  --color-success: #2e7d46;
  --color-warn: #b8451c;

  /* --- Gradients --- */
  --grad-bridge: linear-gradient(180deg, rgba(19,31,41,0.0) 0%, rgba(19,31,41,0.55) 60%, rgba(19,31,41,0.88) 100%);
  --grad-navy: linear-gradient(160deg, #1b2a38 0%, #22303c 100%);
  --grad-rust: linear-gradient(160deg, #e0701f 0%, #f08a24 100%);

  /* --- Type --- */
  /* Display: condensed, confident, rugged. Body: clean humanist sans. */
  --font-display: "Oswald", "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-md: 1.1875rem;
  --fs-lg: 1.5rem;
  --fs-xl: 2rem;
  --fs-2xl: 2.75rem;
  --fs-3xl: 3.75rem;
  --fs-4xl: 5rem;

  --lh-tight: 1.06;
  --lh-snug: 1.2;
  --lh-base: 1.6;
  --lh-loose: 1.75;

  --tracking-display: 0.01em;
  --tracking-eyebrow: 0.18em;

  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  --container: 1200px;
  --container-narrow: 880px;
  --container-wide: 1380px;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 800px;

  --shadow-sm: 0 2px 6px rgba(27, 42, 56, 0.06), 0 1px 2px rgba(27, 42, 56, 0.04);
  --shadow-md: 0 12px 32px rgba(27, 42, 56, 0.10), 0 4px 10px rgba(27, 42, 56, 0.06);
  --shadow-lg: 0 28px 60px rgba(19, 31, 41, 0.20), 0 10px 24px rgba(19, 31, 41, 0.12);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.06);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 520ms;

  --nav-h: 72px;
  --topbar-h: 36px;
}

@media (max-width: 768px) {
  :root {
    --fs-2xl: 2.25rem;
    --fs-3xl: 2.75rem;
    --fs-4xl: 3.25rem;
    --s-9: 4rem;
    --s-10: 5rem;
  }
}