/* ═══════════════════════════════════════════════════════════════════════════
   ENERLYTIK / ENERLYST.AI · BRAND CANON — ratified 2026-07-15 (brand-canon-v1)
   ═══════════════════════════════════════════════════════════════════════════
   This file is the locked wordmark/tagline/gradient/palette canon. It sits
   ALONGSIDE enerlytik-tokens.css (general UI tokens, 7 passport_v2 pages) —
   it does not replace it. Load both; this one governs brand-identity marks
   specifically (wordmark, tagline, the two named gradients, the 12-hex
   palette), which are more sensitive to accidental drift than general UI.

   Canonical wordmark/tagline markup is generated by wordmark.js, not by
   hand-rolling SVG per page — see that file for the actual <text>/gradient
   markup. This CSS supplies the shared tokens + companion classes.

   ── WHY x2 IS 242 / 287, NOT A ROUND NUMBER ─────────────────────────────────
   The Magma Flare wordmark gradient uses gradientUnits="userSpaceOnUse", which
   requires x2 to equal the ACTUAL RENDERED PIXEL WIDTH of the wordmark text —
   not an estimate. Every prior value in this repo (380, 420, 460, 530, found
   across enerlytik_brand_kit.html, both *_wordmark_final.html sheets, the
   downloaded SVG exports, and live enerlyst/oem_portal + fleet_portal) was an
   eyeballed guess, and every one of them overshoots badly (1.6-1.9x too wide),
   meaning the #EC4899 pink end-stop has never actually been visible in any
   shipped wordmark — the text ends before the gradient reaches its own 100%
   stop.

   Measured 2026-07-15 via Playwright + headless Chromium: real Outfit 700
   webfont loaded, `await document.fonts.ready` awaited (NOT a blind
   setTimeout — that race is the actual root cause of every prior wrong
   value), then read directly off a live <text> element with
   `SVGTextElement.getComputedTextLength()`, cross-checked against
   `getBBox().width` (both agreed to within 0.01px):

     'enerlytik'    getComputedTextLength = 239.39px  → x2 = 242 (rounded, small margin)
     'enerlyst.ai'  getComputedTextLength = 285.03px  → x2 = 287 (rounded, small margin)

   If you are about to "fix" 242 or 287 back to a round number like 420 or
   460: don't. Re-measure with the method above if you suspect these are
   stale (e.g. after a font-version bump), don't guess.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@700&family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400&display=swap');

:root {
  /* ── Wordmark gradient — Magma Flare (primary, wordmark text only) ────── */
  --brand-gradient-orange: #FB923C;  /* 0% */
  --brand-gradient-coral:  #F43F5E;  /* 52% */
  --brand-gradient-pink:   #EC4899;  /* 100% */

  /* Measured rendered text width in px — SVG gradient x2, userSpaceOnUse.
     See header comment above for method + date. Do not round further. */
  --brand-wordmark-x2-enerlytik: 242;
  --brand-wordmark-x2-enerlyst-ai: 287;

  /* ── Solar Flare (secondary — shape/box fills ONLY, never text) ────────── */
  --brand-solar-orange: #FB923C;
  --brand-solar-deep-orange: #EA580C;

  /* ── Closed 12-color palette — brand-identity contexts only ────────────── */
  --brand-orange:      #FB923C;
  --brand-coral:        #F43F5E;
  --brand-pink:         #EC4899;
  --brand-deep-orange:  #EA580C;
  --brand-platform-orange: #E8500A;  /* founder ruling: platform accent, valid brand token */
  --brand-platform-navy:   #0A1628;  /* founder ruling: platform bg, valid brand token */
  --brand-near-black:   #080808;
  --brand-magma-dark:   #170502;
  --brand-midnight-navy:#0F172A;
  --brand-forge-charcoal:#1C1917;
  --brand-deep-teal:    #042F2E;
  --brand-warm-cream:   #FFF7ED;

  /* ── Typography — three families only ───────────────────────────────────
     Wordmark: Outfit 700 (platform-wide per founder ruling, not wordmark-only)
     UI/body/tagline: DM Sans 300/400/500/600
     Code/labels/meta: DM Mono 400 (founder ruling — NOT IBM Plex Mono) */
  --brand-font-display: 'Outfit', sans-serif;
  --brand-font-body:    'DM Sans', sans-serif;
  --brand-font-mono:    'DM Mono', monospace;

  /* Tagline — supporting identity, optional, off by default per canon */
  --brand-tagline-color: rgba(251, 146, 60, 0.70);
}

/* ── Wordmark companion class ───────────────────────────────────────────────
   Applied by wordmark.js to the generated <text> element (or to a container,
   for callers that need to style around the injected SVG). Font-weight/size/
   letter-spacing here MUST match the values wordmark.js bakes into the SVG
   attributes directly — this class is a convenience/consistency aid, not the
   source of truth for the SVG markup itself. */
.brand-wordmark {
  font-family: var(--brand-font-display);
  font-weight: 700;
  letter-spacing: 4.8px;
  text-transform: lowercase;
}

/* ── Tagline companion class ─────────────────────────────────────────────────
   Not part of the mark (per canon) — an optional, hero-only supporting line.
   Never italic, never uppercase, never weight-varied (no per-letter tspan
   overrides). */
.brand-tagline {
  font-family: var(--brand-font-body);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 3.6px;
  text-transform: lowercase;
  color: var(--brand-tagline-color);
  font-style: normal;
}

/* ── Never — enforced by convention here, by grep in release_harness.py ────
   No standalone icon box. No letter mark. No drop shadows/glows on brand
   elements. No serif anywhere. No tagline caps/italic/tspan-weight override. */