/* ============================================================
   VORXS Heating & Air Conditioning — Design Tokens
   Colors + Typography
   ============================================================ */

/* Google Fonts — see README "Type Substitution Notes"
   - Times-family serif  : VORXS wordmark only (Times New Roman system,
                           Tinos as metric-compatible Google Fonts fallback)
   - Barlow Condensed    : ALL-CAPS condensed black display — every section
                           headline on vorxs.com (and on the contractor-
                           premium reference brands NexGen / Absolute Airflow)
   - DM Sans             : clean humanist sans for body, forms, captions, UI
*/
/* The Google Fonts stylesheet is linked directly in every page's <head>.
   It used to be @imported here as well, which chained a second render-blocking
   request behind site.css -> tokens.css for the same file. Removed; keep the
   <link> in each page. */

:root {
  /* ---------- BRAND COLORS ------------------------------------------------
     Pulled from the VORXS wordmark + the brief's "darker premium feel".
     The brand runs on three ingredients: signage RED, deep INK black,
     and clean WHITE. Everything else is a supporting neutral.
  */

  /* Signature red — the "O" in VORXS, the flame in the emblem, every CTA */
  --vorxs-red-50:   #fff1f2;
  --vorxs-red-100:  #ffd9dc;
  --vorxs-red-200:  #fbb4b9;
  --vorxs-red-300:  #f47b83;
  --vorxs-red-400:  #ec4751;
  --vorxs-red-500:  #e11d2a;  /* PRIMARY brand red */
  --vorxs-red-600:  #c2121f;  /* hover / pressed */
  --vorxs-red-700:  #9c0d18;
  --vorxs-red-800:  #761018;
  --vorxs-red-900:  #581116;

  /* Ink / charcoal — the dark premium body the brand sits on */
  --vorxs-ink-50:   #f5f5f6;
  --vorxs-ink-100:  #e6e6e8;
  --vorxs-ink-200:  #c9c9cd;
  --vorxs-ink-300:  #9c9ca3;
  --vorxs-ink-400:  #6c6c75;
  --vorxs-ink-500:  #4a4a52;
  --vorxs-ink-600:  #2f2f36;  /* card surface on dark */
  --vorxs-ink-700:  #1f1f24;
  --vorxs-ink-800:  #141418;
  --vorxs-ink-900:  #0a0a0c;  /* near-black, the deepest surface */
  --vorxs-black:    #000000;

  /* Bone — warm-cream off-white, used for editorial sections */
  --vorxs-bone:     #f6f3ee;
  --vorxs-bone-dark:#ece7df;

  /* Steel — cool blue-grey, used sparingly for "cooling / AC" accents */
  --vorxs-steel-100:#e5edf2;
  --vorxs-steel-300:#a8bcc8;
  --vorxs-steel-500:#5a7686;

  /* Heat — warm amber, used sparingly for "heating" accents */
  --vorxs-heat-500: #f0892c;

  /* ---------- SEMANTIC COLOR ROLES (default = light) ---------------------- */
  --bg:             #ffffff;
  --bg-alt:         var(--vorxs-bone);
  --bg-inverse:     var(--vorxs-ink-900);
  --surface:        #ffffff;
  --surface-alt:    var(--vorxs-ink-50);
  --surface-raised: #ffffff;

  --fg:             var(--vorxs-ink-900);
  --fg-muted:       var(--vorxs-ink-500);
  --fg-subtle:      var(--vorxs-ink-400);
  --fg-inverse:     #ffffff;

  --border:         var(--vorxs-ink-100);
  --border-strong:  var(--vorxs-ink-200);
  --border-inverse: rgba(255, 255, 255, 0.12);

  --brand:          var(--vorxs-red-500);
  --brand-hover:    var(--vorxs-red-600);
  --brand-pressed:  var(--vorxs-red-700);
  --on-brand:       #ffffff;

  --focus:          var(--vorxs-red-500);
  --success:        #1f9a5a;
  --warning:        #d68a16;
  --danger:         var(--vorxs-red-600);

  /* ---------- TYPE ------------------------------------------------------- */
  /* Three families, three jobs:
     - serif    : the VORXS wordmark ONLY — nothing else in the UI
     - headline : ALL-CAPS Barlow Condensed Black, the actual section-title
                  voice of vorxs.com. Condensed sans, never expanded.
     - body     : DM Sans for paragraphs, forms, buttons, captions, nav */
  --font-serif:     "Times New Roman", "Times", "Tinos", Georgia, serif;
  --font-display:   var(--font-serif);  /* legacy alias — use --font-headline instead */
  --font-headline:  "Barlow Condensed", "Oswald", "Helvetica Neue Condensed", "Helvetica Neue", system-ui, sans-serif;
  --font-sans:      "DM Sans", "Helvetica Neue", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:      "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Sizes — built on a 1.25 (major third) modular scale, anchored to 16px */
  --fs-12:    0.75rem;   /* 12px — micro labels */
  --fs-14:    0.875rem;  /* 14px — UI small */
  --fs-16:    1rem;      /* 16px — body */
  --fs-18:    1.125rem;  /* 18px — large body */
  --fs-20:    1.25rem;   /* 20px — lead */
  --fs-24:    1.5rem;    /* 24px — h5 */
  --fs-32:    2rem;      /* 32px — h4 */
  --fs-40:    2.5rem;    /* 40px — h3 */
  --fs-56:    3.5rem;    /* 56px — h2 */
  --fs-72:    4.5rem;    /* 72px — h1 / hero */
  --fs-96:    6rem;      /* 96px — display */

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-loose:   1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;  /* the brand's "HEATING & AIR CONDITIONING" tagline */

  /* ---------- SPACING ---------------------------------------------------- */
  --space-0:    0;
  --space-1:    4px;
  --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;
  --space-32:   128px;

  /* ---------- RADII ------------------------------------------------------ */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;     /* default for buttons, inputs, cards */
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  /* ---------- SHADOWS / ELEVATION ---------------------------------------- */
  --shadow-xs:   0 1px 2px rgba(10, 10, 12, 0.06);
  --shadow-sm:   0 2px 6px rgba(10, 10, 12, 0.08);
  --shadow-md:   0 8px 24px rgba(10, 10, 12, 0.10);
  --shadow-lg:   0 18px 48px rgba(10, 10, 12, 0.16);
  --shadow-xl:   0 32px 80px rgba(10, 10, 12, 0.22);

  /* Cinematic gradient — used over hero photography to ensure WCAG on copy */
  --scrim-bottom: linear-gradient(180deg,
                    rgba(10,10,12,0.0) 0%,
                    rgba(10,10,12,0.15) 30%,
                    rgba(10,10,12,0.65) 75%,
                    rgba(10,10,12,0.85) 100%);
  --scrim-left:   linear-gradient(90deg,
                    rgba(10,10,12,0.85) 0%,
                    rgba(10,10,12,0.55) 40%,
                    rgba(10,10,12,0.0) 100%);

  /* ---------- MOTION ----------------------------------------------------- */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:     120ms;
  --dur-base:     200ms;
  --dur-slow:     400ms;

  /* ---------- LAYOUT ----------------------------------------------------- */
  --container-sm: 640px;
  --container-md: 960px;
  --container-lg: 1200px;
  --container-xl: 1440px;
}

/* Dark-section overrides — most "premium" VORXS surfaces are dark */
.vorxs-dark, [data-theme="dark"] {
  --bg:          var(--vorxs-ink-900);
  --bg-alt:      var(--vorxs-ink-800);
  --bg-inverse:  #ffffff;
  --surface:        var(--vorxs-ink-800);
  --surface-alt:    var(--vorxs-ink-700);
  --surface-raised: var(--vorxs-ink-600);
  --fg:          #ffffff;
  --fg-muted:    var(--vorxs-ink-200);
  --fg-subtle:   var(--vorxs-ink-300);
  --fg-inverse:  var(--vorxs-ink-900);
  --border:        rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.20);
}

/* ============================================================
   SEMANTIC TYPE STYLES
   ============================================================ */
.vx-display {
  font-family: var(--font-display);
  font-size: var(--fs-96);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 700; /* Times Roman Bold for impact */
}
.vx-h1 {
  /* default section headline — ALL CAPS Barlow Condensed Black, tight */
  font-family: var(--font-headline);
  font-weight: 900;
  font-size: var(--fs-72);
  line-height: 0.95;
  letter-spacing: 0;
  text-transform: uppercase;
  text-wrap: balance;
}
.vx-h1-serif {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-72);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.vx-h2 {
  font-family: var(--font-headline);
  font-weight: 900;
  font-size: var(--fs-56);
  line-height: 0.98;
  letter-spacing: 0;
  text-transform: uppercase;
  text-wrap: balance;
}
.vx-h3 {
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: var(--fs-32);
  line-height: 1.05;
  letter-spacing: 0;
  text-transform: uppercase;
}
.vx-h4 {
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: var(--fs-24);
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.vx-h5 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
}
.vx-eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-12);
  line-height: 1;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brand);
}
.vx-lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-20);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
  text-wrap: pretty;
}
.vx-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
}
.vx-body-sm {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
}
.vx-caption {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-12);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}
.vx-allcaps {
  font-family: var(--font-sans);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}

/* ============================================================
   BASELINE
   ============================================================ */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}