/* ============================================================
   HVAC RESCUE NOW — Design Tokens
   Aesthetic: trustworthy HVAC blue + a single amber CTA.
   Clean, cool neutrals. Rounded, mobile-first.
   ============================================================ */
:root {
  /* — Brand blues — */
  --navy-900: #0f2b47;
  --navy-800: #16395c;
  --navy-700: #1e4b7a;   /* primary */
  --navy-600: #2d6aa3;
  --navy-500: #3b82c4;   /* bright HVAC blue */
  --navy-300: #a3c7e8;
  --navy-100: #e5f0fa;
  --navy-50:  #f2f7fc;

  /* — Cool neutrals (mist/paper) — */
  --mist-50:  #f7f9fb;
  --mist-100: #eef2f6;
  --mist-200: #e3e9f0;
  --mist-300: #cbd6e2;
  --paper:    #ffffff;

  /* — Ink — */
  --ink-900: #182230;
  --ink-700: #2f3d4e;
  --ink-500: #54657a;
  --ink-300: #8494a7;

  /* — CTA (amber/orange) — */
  --cta:        #f08c00;
  --cta-strong: #d97706;
  --cta-soft:   #ffe7c2;
  --cta-ink:    #3a2400;   /* dark text on amber for AA contrast */

  /* — Semantic — */
  --bg:           var(--mist-50);
  --bg-alt:       var(--navy-50);
  --surface:      var(--paper);
  --text:         var(--ink-900);
  --text-muted:   var(--ink-500);
  --brand:        var(--navy-700);
  --brand-bright: var(--navy-500);
  --line:         #e2e8f0;
  --star:         #f2a93b;

  /* — Type — */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-body: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --fs-eyebrow: 0.78rem;
  --fs-body: 1.0625rem;
  --fs-lead: 1.22rem;
  --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --step-1: clamp(1.18rem, 1.05rem + 0.6vw, 1.4rem);
  --step-2: clamp(1.45rem, 1.2rem + 1.1vw, 1.95rem);
  --step-3: clamp(1.85rem, 1.45rem + 1.9vw, 2.7rem);
  --step-4: clamp(2.3rem, 1.7rem + 3vw, 3.7rem);
  --step-5: clamp(2.7rem, 1.9rem + 4.2vw, 4.6rem);

  /* — Shape — */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* — Soft cool shadows — */
  --sh-sm: 0 1px 2px rgba(15, 30, 50, 0.06);
  --sh-md: 0 8px 24px -10px rgba(22, 57, 92, 0.20);
  --sh-lg: 0 24px 60px -22px rgba(22, 57, 92, 0.32);
  --sh-cta: 0 12px 24px -8px rgba(217, 119, 6, 0.45);

  /* — Layout — */
  --maxw: 1160px;
  --gutter: clamp(1.1rem, 5vw, 2.4rem);
  --section-y: clamp(3.2rem, 7vw, 6rem);

  --ring: 0 0 0 3px var(--cta-soft);
}