/* ==========================================================================
   1st Class Heat & Air — Design Tokens
   The single source of truth. Red / White / Blue is the law.
   "We've always had the heart. We've just never said it." — Randy Lazenby
   ========================================================================== */

:root {
  /* ----- Brand color (sampled from logo + Comfort Club shield) ----- */
  --navy:            #002F8C;  /* primary — text, headers, wordmark, buttons, footers */
  --navy-press:      #00227A;  /* navy hover/press */
  --red:             #D0202E;  /* accent — flame, hot CTAs, shield, ratings emphasis */
  --red-press:       #BC1A28;  /* red hover/press */
  --sky:             #2E6FB6;  /* supporting — cooling / snowflake (sparingly) */
  --amber:           #F2A03D;  /* supporting — warmth / flame / star ratings */
  --star:            #F2A03D;  /* filled rating star */

  /* ----- Neutrals (warm-leaning greys — family business, not cold tech) ----- */
  --white:           #FFFFFF;
  --surface-page:    #F7F8FA;  /* default near-white warm grey page */
  --surface-card:    #FFFFFF;
  --surface-muted:   #EEF1F5;
  --ink:             #14223D;  /* primary body text (warm navy-black) */
  --ink-soft:        #45526B;  /* secondary text */
  --ink-faint:       #6B7689;  /* captions, meta */
  --border-subtle:   #E3E7ED;  /* hairline */
  --border-strong:   #C9D0DA;  /* 2px emphasis / focus */

  /* ----- Action / state mapping ----- */
  --action-primary:        var(--navy);
  --action-primary-hover:  var(--navy-press);
  --action-primary-press:  #001C66;
  --action-accent:         var(--red);
  --action-accent-hover:   var(--red-press);
  --action-accent-press:   #A4151F;

  /* ----- Type families (Google Fonts substitutes per spec) ----- */
  --font-display: "Saira Condensed", "Archivo", system-ui, sans-serif; /* heavy italic uppercase wordmark voice */
  --font-heading: "Archivo", system-ui, -apple-system, sans-serif;     /* 600–800 sturdy geometric */
  --font-body:    "Public Sans", system-ui, -apple-system, sans-serif; /* 400–600 clean dependable */

  /* ----- Type scale (fluid, mobile-first) ----- */
  --fs-display:  clamp(2.75rem, 6vw, 4.5rem);
  --fs-h1:       clamp(2.1rem, 4.5vw, 3.25rem);
  --fs-h2:       clamp(1.65rem, 3.2vw, 2.4rem);
  --fs-h3:       clamp(1.3rem, 2.2vw, 1.6rem);
  --fs-lead:     clamp(1.1rem, 1.6vw, 1.3rem);
  --fs-body:     1.0625rem;   /* 17px */
  --fs-small:    0.9375rem;   /* 15px */
  --fs-eyebrow:  0.8125rem;   /* 13px — uppercase labels */

  --lh-tight:    1.05;
  --lh-heading:  1.15;
  --lh-body:     1.6;
  --tracking-eyebrow: 0.12em;

  /* ----- Spacing rhythm ----- */
  --space-2:  0.25rem;
  --space-4:  0.5rem;
  --space-6:  0.75rem;
  --space-8:  1rem;
  --space-12: 1.5rem;
  --space-16: 2rem;
  --space-24: 3rem;
  --space-32: 4rem;
  --space-48: 6rem;
  --section-y: clamp(3rem, 7vw, 6rem);
  --gutter:    clamp(1rem, 4vw, 2rem);

  /* ----- Layout ----- */
  --container:       1200px;
  --container-wide:  1360px;
  --measure:         720px;   /* readable text width */

  /* ----- Radii (gently rounded — never sharp corporate edges) ----- */
  --radius-sm:   8px;
  --radius-md:   12px;   /* default cards / inputs */
  --radius-lg:   18px;
  --radius-pill: 999px;  /* buttons / chips / badges */

  /* ----- Shadows (soft, warm-tinted, low-spread — residential) ----- */
  --shadow-sm:    0 1px 2px rgba(20, 34, 61, 0.06);
  --shadow-md:    0 6px 18px rgba(20, 34, 61, 0.08);
  --shadow-lg:    0 14px 38px rgba(20, 34, 61, 0.13);
  --shadow-brand: 0 12px 30px rgba(0, 47, 140, 0.22); /* navy-tinted for brand CTAs */

  /* ----- Gradients ----- */
  --gradient-navy: linear-gradient(160deg, #003BAE 0%, #002F8C 55%, #001E66 100%);
  --gradient-hero: linear-gradient(180deg, rgba(0,30,80,0) 35%, rgba(0,22,66,0.78) 100%);
  --scrim-bottom:  linear-gradient(180deg, rgba(0,22,66,0) 40%, rgba(0,22,66,0.72) 100%);

  /* ----- Motion (calm and confident) ----- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   120ms;
  --dur-mid:    220ms;
  --dur-slow:   320ms;
}
