/* ============================================================
   HVAC Hero — Colors & Type Foundations
   Field-service / trades aesthetic. Built for high-contrast,
   glove-friendly use on a phone in a mechanical room.
   ============================================================ */

/* --- Webfonts ---------------------------------------------- */
/* Barlow Condensed: utilitarian, signage-like, matches the
   compressed "HVAC HERO" wordmark in the logo.
   Inter: workhorse UI sans for body/data.
   JetBrains Mono: readings, part numbers, codes. */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ========== COLOR — Brand ========== */
  --brand-blue:          #3d6889;  /* steel blue, from gear */
  --brand-blue-600:      #335874;  /* pressed */
  --brand-blue-700:      #294560;  /* deep, headers */
  --brand-blue-800:      #1e344a;  /* near-black surfaces */
  --brand-blue-900:      #12202f;  /* deepest */
  --brand-blue-400:      #5a82a1;  /* hover lighter */
  --brand-blue-300:      #89a5bd;
  --brand-blue-200:      #b9cad8;
  --brand-blue-100:      #dce6ee;
  --brand-blue-50:       #eef3f7;

  --brand-orange:        #db6f22;  /* safety orange, from speech bubble */
  --brand-orange-600:    #c25f18;  /* pressed */
  --brand-orange-700:    #a24e10;  /* deep */
  --brand-orange-400:    #e38a4c;  /* hover */
  --brand-orange-300:    #ecaa7e;
  --brand-orange-200:    #f4cbb0;
  --brand-orange-100:    #faddc6;
  --brand-orange-50:     #fdf1e7;

  /* ========== COLOR — Neutrals ========== */
  /* Slightly warm, industrial greys — off-white worksheet vibe */
  --ink-0:               #ffffff;
  --ink-50:              #f8f6f3;  /* page bg */
  --ink-100:             #efede8;  /* subtle fill */
  --ink-150:             #e4e1db;  /* hairline fill */
  --ink-200:             #d5d1c9;  /* borders */
  --ink-300:             #b9b4aa;
  --ink-400:             #8f8a80;
  --ink-500:             #6b6760;
  --ink-600:             #4a4741;
  --ink-700:             #32302b;
  --ink-800:             #1f1d1a;
  --ink-900:             #121110;

  /* ========== COLOR — Semantic (foreground) ========== */
  --fg-1:                var(--ink-900);   /* primary text */
  --fg-2:                var(--ink-600);   /* secondary */
  --fg-3:                var(--ink-500);   /* tertiary / meta */
  --fg-4:                var(--ink-400);   /* placeholder */
  --fg-on-dark:          var(--ink-0);
  --fg-on-brand:         var(--ink-0);     /* text on orange/blue */
  --fg-link:             var(--brand-blue);
  --fg-accent:           var(--brand-orange);

  /* ========== COLOR — Semantic (surface) ========== */
  --bg-page:             var(--ink-50);
  --bg-surface:          var(--ink-0);
  --bg-raised:           var(--ink-0);
  --bg-subtle:           var(--ink-100);
  --bg-muted:            var(--ink-150);
  --bg-inverse:          var(--brand-blue-800);
  --bg-brand:            var(--brand-orange);
  --bg-brand-soft:       var(--brand-orange-50);
  --bg-info:             var(--brand-blue-50);

  /* ========== COLOR — Borders ========== */
  --border-1:            var(--ink-200);     /* default hairline */
  --border-2:            var(--ink-300);     /* emphasized */
  --border-strong:       var(--ink-700);
  --border-focus:        var(--brand-orange);

  /* ========== COLOR — Status ========== */
  /* Tuned to sit alongside brand orange without clashing */
  --status-ok:           #2f7d4f;
  --status-ok-bg:        #e4f2ea;
  --status-warn:         #c78a13;   /* amber, distinct from brand orange */
  --status-warn-bg:      #fbf1d8;
  --status-danger:       #b42c2c;
  --status-danger-bg:    #f6dede;
  --status-info:         var(--brand-blue);
  --status-info-bg:      var(--brand-blue-50);

  /* Equipment-state palette (used in app for system readings) */
  --equip-heat:          #c2410c;   /* heating mode */
  --equip-cool:          #2563a8;   /* cooling mode */
  --equip-fan:           #5c7a8c;   /* fan only */
  --equip-off:           var(--ink-400);

  /* ========== TYPE — Families ========== */
  --font-display:        'Barlow Condensed', 'Oswald', 'Arial Narrow', sans-serif;
  --font-sans:           'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:           'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ========== TYPE — Scale (rem-based, 16px root) ========== */
  --text-2xs:            11px;
  --text-xs:             12px;
  --text-sm:             14px;
  --text-base:           16px;
  --text-md:             18px;
  --text-lg:             20px;
  --text-xl:             24px;
  --text-2xl:            30px;
  --text-3xl:            38px;
  --text-4xl:            48px;
  --text-5xl:            64px;
  --text-6xl:            84px;

  /* ========== TYPE — Weights ========== */
  --fw-regular:          400;
  --fw-medium:           500;
  --fw-semibold:         600;
  --fw-bold:             700;
  --fw-black:            800;

  /* ========== TYPE — Line heights ========== */
  --lh-tight:            1.05;
  --lh-snug:             1.2;
  --lh-normal:           1.45;
  --lh-relaxed:          1.6;

  /* ========== TYPE — Letter spacing ========== */
  --tracking-tight:      -0.01em;
  --tracking-normal:     0em;
  --tracking-wide:       0.04em;
  --tracking-wider:      0.08em;    /* for eyebrow labels */
  --tracking-widest:     0.14em;    /* for small caps / tags */

  /* ========== SPACING (4px base) ========== */
  --space-0:             0;
  --space-0-5:           2px;
  --space-1:             4px;
  --space-1-5:           6px;
  --space-2:             8px;
  --space-3:             12px;
  --space-4:             16px;
  --space-5:             20px;
  --space-6:             24px;
  --space-8:             32px;
  --space-10:            40px;
  --space-12:            48px;
  --space-16:            64px;
  --space-20:            80px;
  --space-24:            96px;

  /* ========== RADIUS ========== */
  /* Slightly soft but industrial — not pill-heavy */
  --radius-xs:           3px;
  --radius-sm:           4px;
  --radius-md:           6px;     /* default */
  --radius-lg:           10px;
  --radius-xl:           14px;
  --radius-2xl:          20px;
  --radius-full:         9999px;

  /* ========== SHADOW / ELEVATION ========== */
  /* Tight, hard-ish shadows — avoid soft/glowy "SaaS" look */
  --shadow-xs:           0 1px 0 rgba(18, 32, 47, 0.06);
  --shadow-sm:           0 1px 2px rgba(18, 32, 47, 0.08), 0 1px 0 rgba(18, 32, 47, 0.04);
  --shadow-md:           0 2px 6px rgba(18, 32, 47, 0.10), 0 1px 2px rgba(18, 32, 47, 0.06);
  --shadow-lg:           0 8px 20px rgba(18, 32, 47, 0.12), 0 2px 6px rgba(18, 32, 47, 0.08);
  --shadow-xl:           0 20px 40px rgba(18, 32, 47, 0.18), 0 6px 12px rgba(18, 32, 47, 0.10);
  --shadow-inset:        inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(18, 32, 47, 0.08);
  --shadow-focus:        0 0 0 3px rgba(219, 111, 34, 0.35);

  /* ========== LAYOUT ========== */
  --touch-min:           44px;    /* iOS */
  --touch-comfortable:   56px;    /* glove-friendly */
  --container-sm:        640px;
  --container-md:        960px;
  --container-lg:        1200px;
  --container-xl:        1440px;

  /* ========== MOTION ========== */
  --ease-out:            cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out:         cubic-bezier(0.6, 0, 0.4, 1);
  --ease-snap:           cubic-bezier(0.3, 1.4, 0.5, 1);
  --dur-instant:         80ms;
  --dur-fast:            140ms;
  --dur-base:            220ms;
  --dur-slow:            360ms;
}

/* ============================================================
   Semantic type styles (apply directly or @extend-like via
   utility classes)
   ============================================================ */
html { font-size: 16px; }

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display — Barlow Condensed, used for hero titles, stat numbers, slide headers */
.display-1, h1.display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--text-6xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}
.display-2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

/* Headings — use Inter for UI, Barlow Condensed for marketing/slides */
h1, .h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--text-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
h2, .h2 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--text-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}
h3, .h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
}
h5, .h5 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--text-md);
  line-height: var(--lh-snug);
}

/* Body */
p, .body {
  font-size: var(--text-base);
  line-height: var(--lh-normal);
}
.body-lg { font-size: var(--text-md); line-height: var(--lh-normal); }
.body-sm { font-size: var(--text-sm); line-height: var(--lh-normal); }
.body-xs { font-size: var(--text-xs); line-height: var(--lh-normal); }

/* Eyebrow — small caps label above headings; used a lot in this brand */
.eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--text-xs);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--brand-orange);
}

/* Tags / chips */
.tag {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

/* Code / part numbers / readings */
code, .mono, .code {
  font-family: var(--font-mono);
  font-size: 0.95em;
  font-feature-settings: 'tnum' 1, 'zero' 1;
}

/* Big stat numbers — tabular, display family */
.stat-number {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--text-5xl);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  font-feature-settings: 'tnum' 1;
}

/* Links */
a { color: var(--fg-link); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
a:hover { color: var(--brand-blue-600); }

/* Selection */
::selection { background: var(--brand-orange-200); color: var(--ink-900); }