/* ==========================================================================
   Lewis Total Comfort — Design Tokens
   Single source of truth for brand color, type, spacing, radius, shadow.
   Consumed by the public site, styleguide, and admin panel.
   ========================================================================== */

:root {
  /* ---- Brand palette (truck wrap) ---- */
  --brand-navy: #04142c;
  --brand-navy-2: #081f3f;
  --brand-navy-3: #063664;
  --brand-blue: #09a0f2;
  --brand-ice: #0ea5de;
  --brand-orange: #ef8b1c;
  --brand-orange-2: #ffab3f;
  --brand-orange-dark: #db7810;
  --brand-red: #dc2d2a;

  /* ---- Semantic surfaces & text ---- */
  --surface: #fff;
  --surface-tint: #eef6fc;
  --surface-dark: #04142c;
  --surface-dark-2: #081f3f;
  --ink: #061a38;
  --muted: #52677f;
  --line: #c9d9e7;
  --line-soft: #e9f3fa;
  --on-dark: #d9efff;
  --on-dark-2: #cfe0ee;
  --on-dark-3: #7d9ab5;
  --footer-bg: #020d20;
  --footer-ink: #9fb3c5;
  --footer-sub: #7990a5;

  /* ---- Feedback ---- */
  --success-bg: #e9f7ef;
  --success-line: #3b9a69;
  --success-ink: #1c5c3d;
  --error-bg: #fdeeee;
  --error-line: #dc2d2a;
  --error-ink: #7d1f1d;
  --focus: #ffe09d;
  --focus-ring: rgba(9, 160, 242, .18);

  /* ---- Service accents (matches logo icon strip) ---- */
  --cooling: #0ea5de;
  --cooling-bg-1: #e8f6fd;
  --cooling-bg-2: #f6fcff;
  --cooling-line: #bfe4f6;
  --cooling-hover: #79cfee;
  --heating: #ef8b1c;
  --heating-bg-1: #fdf0dd;
  --heating-bg-2: #fff9f0;
  --heating-line: #f3d3a6;
  --heating-hover: #ecb267;
  --plumbing: #09a0f2;
  --plumbing-bg-1: #e7f3fe;
  --plumbing-bg-2: #f5faff;
  --plumbing-line: #c2e1fb;
  --plumbing-hover: #7cc3f5;
  --air: #081f3f;
  --air-bg-1: #eaf0f8;
  --air-bg-2: #f7fafc;
  --air-line: #ccd9ea;
  --air-hover: #8fa8c7;

  /* ---- Typography ---- */
  --font-display: "Montserrat", Arial, sans-serif;
  --font-body: "Inter", Arial, sans-serif;
  --text-h1: clamp(48px, 6vw, 78px);
  --text-h2: clamp(34px, 4vw, 52px);
  --text-h3: 21px;
  --text-body: 16px;
  --text-small: 13px;
  --text-tiny: 12px;

  /* ---- Radius ---- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-sm: 0 2px 14px rgba(4, 20, 44, .06);
  --shadow-md: 0 10px 26px rgba(4, 20, 44, .09);
  --shadow-lg: 0 14px 34px rgba(4, 20, 44, .1);
  --shadow-xl: 0 24px 50px -12px rgba(0, 0, 0, .4);
  --shadow-cta: 0 8px 20px rgba(239, 139, 28, .35);
  --shadow-badge: 0 12px 30px rgba(4, 20, 44, .22);

  /* ---- Spacing ---- */
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 18px;
  --space-5: 24px;
  --space-6: 30px;
  --space-7: 42px;
  --space-8: 56px;
  --space-9: 64px;
  --space-10: 84px;
  --space-11: 94px;

  /* ---- Layout ---- */
  --wrap: 1180px;
  --nav-h: 84px;
  --nav-h-mobile: 72px;
  --breakpoint-mid: 1150px;
  --breakpoint-mobile: 900px;
  --breakpoint-small: 560px;

  /* ---- Motion ---- */
  --ease: .15s ease;
  --ease-card: .18s ease;

  /* ======================================================
     Legacy aliases — kept so existing components read the
     brand names they were built with. New work should use
     the semantic names above.
     ====================================================== */
  --navy: var(--brand-navy);
  --lewis: var(--brand-navy-2);
  --blue: var(--brand-blue);
  --ice: var(--brand-ice);
  --orange: var(--brand-orange);
  --pale: var(--surface-tint);
  --white: var(--surface);
  --red: var(--brand-red);
}