/* ==========================================================================
   WHE Design Tokens — Global visual language
   ========================================================================== */

:root {
  /* Brand colors */
  --whe-midnight: #041a2f;
  --whe-midnight-deep: #02101c;
  --whe-navy: #0a2744;
  --whe-blue: #087ef5;
  --whe-blue-hover: #0669d1;
  --whe-electric: #18b8ff;
  --whe-ice: #eaf7ff;
  --whe-white: #ffffff;
  --whe-charcoal: #111820;
  --whe-slate: #5a6b7d;
  --whe-mist: #f4f8fb;
  --whe-border: rgba(4, 26, 47, 0.1);
  --whe-border-strong: rgba(4, 26, 47, 0.16);

  /* Semantic */
  --color-bg: var(--whe-white);
  --color-bg-alt: var(--whe-mist);
  --color-text: var(--whe-charcoal);
  --color-text-muted: var(--whe-slate);
  --color-text-on-dark: var(--whe-white);
  --color-text-on-dark-muted: rgba(255, 255, 255, 0.72);
  --color-accent: var(--whe-blue);
  --color-accent-soft: var(--whe-electric);

  /* Typography */
  --font-display: "Archivo", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  --tracking-tight: -0.04em;
  --tracking-display: -0.035em;
  --tracking-label: 0.12em;

  /* Type scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.82rem + 0.25vw, 0.9375rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --text-md: clamp(1.0625rem, 1rem + 0.3vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --text-h3: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  --text-h2: clamp(2.5rem, 1.8rem + 2.8vw, 4.5rem);
  --text-h1: clamp(3.25rem, 2.2rem + 4.5vw, 6.5rem);

  /* Layout */
  --max-width: 1380px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --header-height: 104px;
  --header-height-mobile: 84px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-btn: 10px;

  /* Elevation / effects */
  --shadow-nav: 0 1px 0 rgba(4, 26, 47, 0.06), 0 8px 24px rgba(4, 26, 47, 0.06);
  --shadow-card: 0 12px 40px rgba(2, 16, 28, 0.35);
  --shadow-btn: 0 8px 24px rgba(8, 126, 245, 0.35);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 180ms;
  --duration: 320ms;
  --duration-slow: 700ms;

  /* Booking / contact — wire to live integrations */
  --booking-url: url("https://book.housecallpro.com/book/Water-Heating-Experts-LLC---WHE/709bd786f77a41e2a2f6742b0719364b");
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration: 0ms;
    --duration-slow: 0ms;
  }
}