/* =============================================================================
   UTILITIES.CSS — Design Tokens, Base Reset & Animation System
   Heating & Air Innovations | Fundora Build V2

   CANONICAL VARIABLE NAMING — every component file references these.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. DESIGN TOKENS
   --------------------------------------------------------------------------- */
:root {
  /* ── Colors ── */
  --color-red:          #C8202F;
  --color-red-dark:     #A81020;
  --color-red-light:    rgba(200,32,47,0.06);
  --color-navy:         #1A2A5E;
  --color-navy-dark:    #111C45;
  --color-navy-light:   rgba(26,42,94,0.06);
  --color-white:        #FFFFFF;
  --color-bg:           #F7F8FA;
  --color-bg-alt:       #F0F1F4;
  --color-gray-light:   #F7F8FA;
  --color-gray-mid:     #D1D5DB;
  --color-gray-dark:    #4B5563;
  --border-color:       #E2E4E9;
  --color-text:         #1A1A1A;
  --color-text-mid:     #4A4F5C;
  --color-text-light:   #6B7280;
  --color-green:        #16A34A;
  --color-green-light:  #DCFCE7;

  /* ── Typography ── */
  --font-base:    'Inter', system-ui, -apple-system, sans-serif;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  --text-xs:   0.6875rem;   /* 11px */
  --text-sm:   0.8125rem;   /* 13px */
  --text-base: 1rem;        /* 16px */
  --text-md:   1.125rem;    /* 18px */
  --text-lg:   1.25rem;     /* 20px */
  --text-xl:   1.5rem;      /* 24px */
  --text-2xl:  1.875rem;    /* 30px */
  --text-3xl:  2.25rem;     /* 36px */
  --text-4xl:  3rem;        /* 48px */
  --text-5xl:  3.75rem;     /* 60px */
  --text-6xl:  4.5rem;      /* 72px */

  --leading-tight: 1.15;
  --leading-snug:  1.3;
  --leading-base:  1.6;

  /* ── Spacing ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ── Layout ── */
  --max-width:      1200px;
  --max-width-sm:   680px;
  --max-width-md:   860px;
  --header-height:  72px;
  --section-pad-y:  var(--space-20);

  /* ── Radius ── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:  0 12px 32px rgba(0,0,0,0.10);
  --shadow-xl:  0 20px 60px rgba(0,0,0,0.14);
  --shadow-glow: 0 4px 20px rgba(200,32,47,0.25);

  /* ── Transitions ── */
  --ease:         cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 0.2s var(--ease);
  --transition-base: 0.35s var(--ease);
  --transition-slow: 0.6s var(--ease-out);

  /* ── Z-index ── */
  --z-base:    1;
  --z-sticky:  100;
  --z-header:  200;
  --z-overlay: 300;
  --z-modal:   400;

  /* ── Phase 2: Persistent UI ── */
  --city-strip-height: 32px;
  --z-persistent: 150;
}


/* ---------------------------------------------------------------------------
   2. BASE RESET
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--leading-base);
  color: var(--color-text);
  background-color: var(--color-white);
  overflow-x: hidden;
}

img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-base); font-weight: var(--fw-extrabold); line-height: var(--leading-tight); }
p { margin: 0; }
button { font: inherit; border: none; background: none; cursor: pointer; padding: 0; }
input, select, textarea { font: inherit; }
address { font-style: normal; }
blockquote { margin: 0; padding: 0; }
figure { margin: 0; }


/* ---------------------------------------------------------------------------
   3. LAYOUT
   --------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
@media (min-width: 768px)  { .container { padding-inline: var(--space-8); } }
@media (min-width: 1024px) { .container { padding-inline: var(--space-12); } }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}


/* ---------------------------------------------------------------------------
   4. REVEAL-ON-SCROLL ANIMATION SYSTEM
   --------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* Staggered children inside .reveal-group */
.reveal-group > .reveal:nth-child(1) { transition-delay: 0s; }
.reveal-group > .reveal:nth-child(2) { transition-delay: 0.08s; }
.reveal-group > .reveal:nth-child(3) { transition-delay: 0.10s; }
.reveal-group > .reveal:nth-child(4) { transition-delay: 0.16s; }
.reveal-group > .reveal:nth-child(5) { transition-delay: 0.24s; }
.reveal-group > .reveal:nth-child(6) { transition-delay: 0.32s; }
.reveal-group > .reveal:nth-child(7) { transition-delay: 0.40s; }
.reveal-group > .reveal:nth-child(8) { transition-delay: 0.48s; }
.reveal-group > .reveal:nth-child(9) { transition-delay: 0.56s; }
.reveal-group > .reveal:nth-child(10) { transition-delay: 0.64s; }

/* Direction variants */
.reveal--left  { transform: translateX(-32px) translateY(0); }
.reveal--right { transform: translateX(32px) translateY(0); }
.reveal--scale { transform: scale(0.96); opacity: 0; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal--left, .reveal--right, .reveal--scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* ---------------------------------------------------------------------------
   5. SHARED SECTION UTILITIES
   --------------------------------------------------------------------------- */
.section-pad    { padding-block: var(--section-pad-y); }
.section-pad--sm { padding-block: var(--space-12); }

.section-header {
  text-align: center;
  max-width: var(--max-width-sm);
  margin-inline: auto;
  margin-bottom: var(--space-12);
}
.section-header--left {
  text-align: left;
  margin-inline: 0;
}
.section-header h2 {
  font-size: var(--text-3xl);
  font-weight: var(--fw-extrabold);
  color: var(--color-navy);
  margin-bottom: var(--space-4);
}
@media (min-width: 768px) {
  .section-header h2 { font-size: var(--text-4xl); }
}
.section-header p {
  font-size: var(--text-lg);
  color: var(--color-text-light);
  line-height: var(--leading-base);
}

.section-eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-red);
  margin-bottom: var(--space-3);
}