/* ═══════════════════════════════════════════════════════════════
   HVAC247PRO — Design Tokens
   ─────────────────────────────────────────────────────────────
   Single source of truth. All other CSS files reference these.
   Breakpoints (documented, not vars — used in @media):
     sm:  480px   md:  768px   lg: 1024px   xl: 1280px   2xl: 1536px
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand palette ──────────────────────────────────────── */

  /* Navy (primary brand — dark UI foundation) */
  --color-navy-50:  #e6ebf3;
  --color-navy-100: #c2cde1;
  --color-navy-200: #94a4c4;
  --color-navy-300: #5e74a0;
  --color-navy-400: #354c7a;
  --color-navy-500: #1d3556;
  --color-navy-600: #15263f;
  --color-navy-700: #132337;
  --color-navy-800: #0d1a2a;
  --color-navy-900: #0a1628;
  --color-navy-950: #060f1c;

  /* Red (emergency accent — 24/7 service, urgency) */
  --color-red-50:  #fdecec;
  --color-red-100: #fac9ca;
  --color-red-200: #f29597;
  --color-red-300: #e85d61;
  --color-red-400: #d23438;
  --color-red-500: #e92227;
  --color-red-600: #a51f24;
  --color-red-700: #821a1f;
  --color-red-800: #5e1216;
  --color-red-900: #3c0c0e;

  /* Gold (premium accent — trust metrics, licensed badges) */
  --color-gold-50:  #fef7df;
  --color-gold-100: #fcedb1;
  --color-gold-200: #fadf76;
  --color-gold-300: #f8cf36;
  --color-gold-400: #f5b100;
  --color-gold-500: #d99800;
  --color-gold-600: #a87600;
  --color-gold-700: #785400;
  --color-gold-800: #4a3300;
  --color-gold-900: #2c1f00;

  /* Bone / neutrals (warm off-whites, never pure white) */
  --color-bone-50:  #fafaf8;
  --color-bone-100: #f4f5f1;
  --color-bone-200: #e7e9e1;
  --color-bone-300: #d2d6c8;
  --color-bone-400: #aeb6a3;
  --color-bone-500: #7e8a73;
  --color-bone-600: #5a6451;
  --color-bone-700: #3c4337;
  --color-bone-800: #232723;
  --color-bone-900: #121412;

  /* Steel (UI grays — body text on dark) */
  --color-steel-50:  #f4f6fb;
  --color-steel-100: #dde2ed;
  --color-steel-200: #b9c2d4;
  --color-steel-300: #94a0b8;
  --color-steel-400: #6e7c97;
  --color-steel-500: #4f5d77;
  --color-steel-600: #3a455a;
  --color-steel-700: #2a3346;
  --color-steel-800: #1c2333;
  --color-steel-900: #11151f;

  /* ── Semantic colors (always reference palette, never raw hex) ── */

  /* Surfaces (mobile-first dark) */
  --surface-0: var(--color-navy-950);     /* page background */
  --surface-1: #ffffff;                   /* primary surface */
  --surface-2: var(--color-bone-100);     /* raised surface */
  --surface-3: var(--color-bone-200);     /* highest elevation */
  --surface-light: var(--color-bone-50);  /* alternating light section */
  --surface-light-alt: var(--color-bone-100);

  /* Text */
  --text-primary: var(--color-navy-900);
  --text-secondary: rgba(244, 246, 251, 0.72);
  --text-tertiary: rgba(244, 246, 251, 0.55);
  --text-on-light: var(--color-navy-900);
  --text-on-light-secondary: rgba(10, 22, 40, 0.72);
  --text-on-accent: var(--color-navy-950);

  /* Borders (hairlines — barely-there, scoped) */
  --border-subtle: rgba(244, 246, 251, 0.08);
  --border-default: rgba(244, 246, 251, 0.14);
  --border-strong: rgba(244, 246, 251, 0.24);
  --border-accent-red: rgba(197, 40, 46, 0.32);
  --border-accent-gold: rgba(245, 177, 0, 0.28);
  --border-on-light: rgba(10, 22, 40, 0.10);

  /* Accents */
  --accent-emergency: var(--color-red-500);
  --accent-emergency-hover: var(--color-red-400);
  --accent-emergency-active: var(--color-red-600);
  --accent-premium: var(--color-gold-400);
  --accent-premium-hover: var(--color-gold-300);
  --accent-premium-active: var(--color-gold-500);
  --accent-link: var(--color-gold-300);
  --accent-link-hover: var(--color-gold-200);

  /* Status */
  --status-success: #2faa6a;
  --status-warning: var(--color-gold-400);
  --status-danger: var(--color-red-500);
  --status-info: #4a8fcf;

  /* ── Typography ─────────────────────────────────────────── */

  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Fluid type scale — clamp(min, base + vw, max) */
  --text-xs:    clamp(0.75rem, 0.72rem + 0.10vw, 0.81rem);   /* ~12-13px */
  --text-sm:    clamp(0.85rem, 0.82rem + 0.15vw, 0.94rem);   /* ~14-15px */
  --text-base:  clamp(1rem,    0.95rem + 0.25vw, 1.125rem);  /* ~16-18px */
  --text-lg:    clamp(1.125rem,1.05rem + 0.40vw, 1.30rem);   /* ~18-21px */
  --text-xl:    clamp(1.30rem, 1.18rem + 0.55vw, 1.55rem);   /* ~21-25px */
  --text-2xl:   clamp(1.55rem, 1.35rem + 0.85vw, 1.95rem);   /* ~25-31px */
  --text-3xl:   clamp(1.85rem, 1.55rem + 1.40vw, 2.50rem);   /* ~30-40px */
  --text-4xl:   clamp(2.25rem, 1.80rem + 2.10vw, 3.25rem);   /* ~36-52px */
  --text-5xl:   clamp(2.75rem, 2.10rem + 3.00vw, 4.25rem);   /* ~44-68px */
  --text-hero:  clamp(2.95rem, 2.10rem + 4.20vw, 5.50rem);   /* ~47-88px */

  /* Line heights */
  --leading-none:    1;
  --leading-tight:   1.15;
  --leading-snug:    1.30;
  --leading-normal:  1.55;
  --leading-relaxed: 1.70;
  --leading-loose:   1.90;

  /* Letter spacing */
  --tracking-tighter: -0.04em;
  --tracking-tight:   -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.10em;
  --tracking-widest:  0.22em;

  /* Font weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
  --weight-black:   800;

  /* ── Spacing (4px / 8px hybrid scale) ───────────────────── */
  --space-0:   0;
  --space-px:  1px;
  --space-1:   0.25rem;   /* 4px */
  --space-2:   0.5rem;    /* 8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-7:   1.75rem;   /* 28px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-14:  3.5rem;    /* 56px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  /* Fluid section spacing */
  --space-section:    clamp(3.5rem, 2.5rem + 5vw, 7rem);
  --space-section-sm: clamp(2rem,   1.5rem + 2.5vw, 3.5rem);
  --space-gutter:     clamp(1rem,   0.75rem + 1.25vw, 2rem);

  /* ── Radius ─────────────────────────────────────────────── */
  --radius-none:  0;
  --radius-xs:    4px;
  --radius-sm:    6px;
  --radius-md:    10px;
  --radius-lg:    14px;
  --radius-xl:    20px;
  --radius-2xl:   28px;
  --radius-3xl:   36px;
  --radius-pill:  9999px;

  /* ── Shadows (layered for depth on dark surfaces) ───────── */
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-sm:  0 2px 6px rgba(0, 0, 0, 0.45);
  --shadow-md:  0 8px 24px -4px rgba(0, 0, 0, 0.55);
  --shadow-lg:  0 18px 40px -10px rgba(0, 0, 0, 0.65);
  --shadow-xl:  0 32px 64px -16px rgba(0, 0, 0, 0.75);

  /* Glow accents (used sparingly for premium CTAs) */
  --glow-gold:  0 0 24px rgba(245, 177, 0, 0.35), 0 0 60px rgba(245, 177, 0, 0.15);
  --glow-red:   0 0 24px rgba(197, 40, 46, 0.35), 0 0 60px rgba(197, 40, 46, 0.15);

  /* Focus ring */
  --ring-width: 3px;
  --ring-offset: 2px;
  --ring-color: var(--color-gold-300);
  --ring-color-on-light: var(--color-navy-700);

  /* ── Motion ─────────────────────────────────────────────── */
  --duration-instant: 80ms;
  --duration-fast:    150ms;
  --duration-normal:  220ms;
  --duration-slow:    400ms;
  --duration-slower:  700ms;

  /* Easings — expo out is the workhorse */
  --ease-linear:     linear;
  --ease-in:         cubic-bezier(0.4, 0, 1, 1);
  --ease-out:        cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-expo-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-index scale ──────────────────────────────────────── */
  --z-base:     0;
  --z-raised:   10;
  --z-sticky:   100;
  --z-overlay:  200;
  --z-drawer:   300;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;
  --z-max:      9999;

  /* ── Layout ─────────────────────────────────────────────── */
  --container-xs:  480px;
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1200px;
  --container-2xl: 1320px;
  --container-max: 1440px;

  /* ── Gradients (signature brand) ────────────────────────── */
  --gradient-emergency:
    linear-gradient(135deg, var(--color-red-500) 0%, var(--color-red-400) 100%);
  --gradient-premium:
    linear-gradient(135deg, var(--color-gold-400) 0%, var(--color-gold-300) 50%, var(--color-gold-400) 100%);
  --gradient-navy:
    linear-gradient(180deg, var(--color-navy-900) 0%, var(--color-navy-950) 100%);
  --gradient-hero-overlay:
    linear-gradient(180deg, rgba(10, 22, 40, 0.55) 0%, rgba(6, 15, 28, 0.92) 100%);
  --gradient-signature:
    linear-gradient(110deg, var(--color-gold-400) 0%, var(--color-navy-300) 50%, var(--color-red-400) 100%);
  --gradient-num:
    linear-gradient(180deg, var(--color-gold-300) 0%, var(--color-gold-400) 100%);
  /* 2026-05-17 — User directive: yellow→red w/ white font. Gold premium accents
     replaced with red+white. Real gold scale preserved for any one-off use. */
  --accent-premium: var(--color-red-600);
  --accent-premium-hover: var(--color-red-500);
  --accent-premium-active: var(--color-red-700);
  --accent-premium-text: #ffffff;
  --border-accent-gold: rgba(197, 40, 46, 0.40);
  --gradient-premium: linear-gradient(135deg, var(--color-red-600) 0%, var(--color-red-700) 100%);

}

/* ── Light-mode override (optional — site is dark-first) ──── */
@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
    --surface-0: var(--color-bone-50);
    --surface-1: #ffffff;
    --surface-2: var(--color-bone-100);
    --surface-3: var(--color-bone-200);
    --text-primary: var(--color-navy-900);
    --text-secondary: rgba(10, 22, 40, 0.72);
    --text-tertiary: rgba(10, 22, 40, 0.55);
    --border-subtle: rgba(10, 22, 40, 0.06);
    --border-default: rgba(10, 22, 40, 0.12);
    --border-strong: rgba(10, 22, 40, 0.22);
  }
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast:    0ms;
    --duration-normal:  0ms;
    --duration-slow:    0ms;
    --duration-slower:  0ms;
  }
}