/* PowerCord Energy — Colors & Type Foundations
 * Source: Production Vercel CSS variables, verified April 21, 2026.
 * https://powercord-www-six.vercel.app/
 */

/* Inter is the sole brand typeface — self-hosted variable fonts.
 * Roman + italic axes; opsz 14–32, wght 100–900. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype-variations"),
       url("fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Inter-Italic-VariableFont_opsz_wght.ttf") format("truetype-variations"),
       url("fonts/Inter-Italic-VariableFont_opsz_wght.ttf") format("truetype");
}

:root {
  /* ──────────────────────────────────────────────────────────
     CORE BRAND PALETTE
     ────────────────────────────────────────────────────────── */
  --conductor:        #25476c; /* Primary brand. Logo body, headlines, primary text. */
  --live-wire:        #f9a727; /* Accent. CTA fill, "Energy" wordmark, section rules. */
  --spark:            #f14721; /* Eyebrow labels, structural separators. */
  --warm-current:     #ffdda6; /* Callout fills, highlight boxes, "also available" dividers. */
  --soft-charge:      #f4e4cc; /* Page-switcher bars, slide-cover title-card fill. */
  --clean-slate:      #f4f3ef; /* Primary off-white section background. */

  /* ──────────────────────────────────────────────────────────
     WEB VARIANTS & UTILITY COLORS
     ────────────────────────────────────────────────────────── */
  --conductor-dark:   #1a3352; /* Nav bar, dark cards, secondary dark surfaces. */
  --live-wire-dark:   #d98a10; /* Hover state for amber CTAs. */
  --text-dark:        #25476c; /* Primary body text (= Conductor). */
  --text-gray:        #5a6a7a; /* Secondary body text on light backgrounds. */
  --border:           #dde4ec; /* Default card / divider border. */
  --white:            #ffffff;

  /* Semantic role aliases (use these in app/site code) */
  --bg:               var(--white);
  --bg-alt:           var(--clean-slate);
  --bg-dark:          var(--conductor);
  --bg-dark-alt:      var(--conductor-dark);
  --fg1:              var(--conductor);    /* primary on light */
  --fg2:              var(--text-gray);    /* secondary on light */
  --fg-on-dark:       var(--white);
  --fg-on-dark-2:     rgba(255,255,255,0.75);
  --accent:           var(--live-wire);
  --accent-hover:     var(--live-wire-dark);
  --eyebrow:          var(--spark);
  --callout:          var(--warm-current);
  --callout-2:        var(--soft-charge);

  /* ──────────────────────────────────────────────────────────
     TYPOGRAPHY — base
     ────────────────────────────────────────────────────────── */
  --font-sans: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;

  /* Type scale — sizes (verified from production CSS) */
  --fs-h1:        clamp(38px, 4.5vw, 58px); /* Hero — Inter 900 / -2px */
  --fs-h2:        clamp(28px, 3.5vw, 42px); /* Section — Inter 900 / -0.8px */
  --fs-h3:        22px;                     /* Card — Inter 800 / normal */
  --fs-logo-nav:  20px;                     /* Wordmark — Inter 800 / -0.3px */
  --fs-body:      18px;                     /* Hero sub & long-form */
  --fs-body-sm:   16px;                     /* Section body */
  --fs-eyebrow:   12px;                     /* Eyebrow — Inter 700 / 2px tracked / UPPER */
  --fs-eyebrow-sm:11px;                     /* Card eyebrow */
  --fs-button:    15px;                     /* Buttons */

  /* Letter-spacing tokens */
  --tracking-h1:        -2px;
  --tracking-h2:        -0.8px;
  --tracking-h3:        normal;
  --tracking-logo:      -0.3px;
  --tracking-eyebrow:   2px;
  --tracking-button:    0.2px;

  /* Line-height tokens */
  --lh-tight:   1.07;   /* Hero */
  --lh-snug:    1.15;   /* H2/H3 */
  --lh-body:    1.7;    /* 1.65–1.75 range — body copy */

  /* ──────────────────────────────────────────────────────────
     LAYOUT TOKENS (web)
     ────────────────────────────────────────────────────────── */
  --max-width:        1280px;
  --pad:              clamp(24px, 7vw, 112px); /* Updated May 3, 2026 */
  --section-py:       96px;     /* Marketing section vertical padding */
  --hero-pt:          100px;
  --hero-pb:          80px;
  --col-max:          680px;    /* Hard cap on body copy column width */

  /* ──────────────────────────────────────────────────────────
     RADII / SHADOWS / BORDERS
     ────────────────────────────────────────────────────────── */
  --radius-sm:   12px;  /* Buttons (updated per brand feedback May 2026) */
  --radius-md:   12px;  /* Cards */
  --radius-lg:   16px;  /* Hero cards, callout boxes */

  --border-1:    1px solid var(--border);

  /* Shadows kept low-elevation per design standard
     (no blur >24px, no opacity >0.12) */
  --shadow-card:  0 2px 8px rgba(26, 51, 82, 0.06), 0 1px 2px rgba(26, 51, 82, 0.04);
  --shadow-card-hover: 0 4px 16px rgba(26, 51, 82, 0.08), 0 2px 4px rgba(26, 51, 82, 0.06);
  --shadow-modal: 0 20px 24px rgba(26, 51, 82, 0.10), 0 4px 8px rgba(26, 51, 82, 0.06);

  /* ──────────────────────────────────────────────────────────
     MOTION
     ────────────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    150ms;
  --dur-base:    220ms;
  --dur-slow:    320ms;
}

/* ────────────────────────────────────────────────────────────
   SEMANTIC ELEMENT STYLES
   Apply by importing this stylesheet — these select on tags so
   any plain HTML inherits PowerCord's typographic system.
   ──────────────────────────────────────────────────────────── */
html, body {
  font-family: var(--font-sans);
  font-size:   var(--fs-body-sm);
  line-height: var(--lh-body);
  color:       var(--fg1);
  background:  var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color:       var(--fg1);
  margin: 0 0 0.5em;
}

h1 {
  font-size:    var(--fs-h1);
  font-weight:  900;
  letter-spacing: var(--tracking-h1);
  line-height:  var(--lh-tight);
}

h2 {
  font-size:    var(--fs-h2);
  font-weight:  900;
  letter-spacing: var(--tracking-h2);
  line-height:  var(--lh-snug);
}

h3 {
  font-size:    var(--fs-h3);
  font-weight:  800;
  letter-spacing: var(--tracking-h3);
  line-height:  var(--lh-snug);
}

p {
  font-size:   var(--fs-body-sm);
  line-height: var(--lh-body);
  color:       var(--fg1);
  max-width:   var(--col-max);
  margin: 0 0 1em;
}

p.lead {
  font-size: var(--fs-body);
}

/* Eyebrow label — micro-label above every section/card headline.
   Spark color, 700 weight, 2px tracked, uppercase, 11–12px. */
.eyebrow {
  display: inline-block;
  font-size:   var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--eyebrow);
  margin: 0 0 12px;
}
.eyebrow--sm { font-size: var(--fs-eyebrow-sm); }

/* Section rule — 48px Live Wire underscore that sits below H3 card heads */
.rule, hr.rule {
  display: block;
  width:  48px;
  height: 3px;
  border: 0;
  background: var(--live-wire);
  margin: 12px 0 16px;
}

/* Logo wordmark — for HTML rendering of Logo 2.0 */
.wordmark {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size:   var(--fs-logo-nav);
  letter-spacing: var(--tracking-logo);
  white-space: nowrap;
  line-height: 1;
}
.wordmark .pc { color: var(--conductor); }
.wordmark .en { color: var(--live-wire); }
.wordmark--on-dark .pc { color: var(--white); }

/* Buttons — one shape, three color variants. No uppercase, no shadow, no gradient. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-button);
  letter-spacing: var(--tracking-button);
  text-transform: none;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 14px 28px;
  background: var(--live-wire);
  color: var(--white);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out);
}
.btn:hover { background: var(--live-wire-dark); }
/* Brand rule: buttons use Live Wire (amber) or Spark (red-orange) only.
   Never navy as a button fill. */
.btn--spark { background: var(--spark); color: var(--white); }
.btn--spark:hover { background: #d23a18; }
.btn--white { background: var(--white); color: var(--conductor); }
.btn--white:hover { background: var(--clean-slate); }
.btn--ghost { background: transparent; color: inherit; padding: 14px 0; }