/* ============================================================
   DESIGN SYSTEM — "THERMAL"
   GSA Annual Meet 8, 2026

   A deliberate departure from the approved key-visual system:
   ultramarine void, engineering grid, and a cool-blue / heat-orange
   duotone drawn from the energy transition itself — cool
   infrastructure under thermal load.

   Committed dark. There is no light mode by design.

   NOTE: this palette and typeface pairing are NOT the approved GSA
   design system (navy / teal / gold, Archivo + Public Sans). If this
   direction is chosen, GSA and ET Edge must re-approve colour and type.
   ============================================================ */
:root{
  /* ---- Void grounds (ultramarine bias, not neutral black) ---- */
  --void:#050914;      /* page */
  --deep:#0a1226;      /* alternate band */
  --surface:#111c38;   /* raised panel */
  --surface-2:#18254a; /* hover / stepped panel */
  --line:#22315c;      /* hairline */
  --line-strong:#33477e;

  /* ---- Heat: primary accent (thermal load, urgency, execution) ---- */
  --heat-700:#b83a13;
  --heat-600:#e04f22;
  --heat-500:#ff6a3d;
  --heat-400:#ff8a5c;
  --ember-300:#ffd9a0;

  /* ---- Cool: secondary accent (grid, capital, infrastructure) ---- */
  --cool-600:#1c66c4;
  --cool-500:#2b7fe0;
  --cool-400:#4da3ff;
  --cool-200:#a8ccff;

  /* ---- Ink ---- */
  --ink-100:#eaf0ff;
  --ink-300:#b9c6e4;
  --ink-500:#7e8fb5;
  --ink-700:#4a5878;

  /* ---- ET Edge co-brand. Reserved for the credit lockup only.
          Never apply this to any other element. ---- */
  --crimson-600:#cb1217;

  /* ---- Spectrum bar from the GSA logo.
          Decorative divider bars only — never a background,
          text colour, or button fill. ---- */
  --spectrum-green:#5da33f; --spectrum-gold:#e8b92b;
  --spectrum-blue:#3896c1; --spectrum-red:#cb1217;

  /* ---- Semantic ---- */
  --text-head:var(--ink-100);
  --text-body:var(--ink-300);
  --text-muted:var(--ink-500);
  --accent:var(--heat-500);
  --accent-2:var(--cool-400);
  --focus-ring:var(--cool-400);

  /* ---- Type: condensed poster display over a geometric sans ---- */
  --font-display:'Big Shoulders Display','Arial Narrow',sans-serif;
  --font-body:'Manrope',-apple-system,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'Cascadia Mono',monospace;

  /* Condensed faces carry far larger sizes before they feel oversized. */
  --text-display-xl:clamp(3.5rem,calc(2rem + 6.4vw),8rem);
  --text-display-l:clamp(2.5rem,calc(1.7rem + 3.6vw),5rem);
  --text-display-m:clamp(2rem,calc(1.5rem + 2.2vw),3.25rem);
  --text-display-s:clamp(1.5rem,calc(1.25rem + 1vw),2.125rem);
  --text-title:1.25rem;
  --text-body-l:1.0625rem; --text-base:1rem;
  --text-small:.9375rem; --text-micro:.8125rem; --text-label:.6875rem;
  --text-stat:clamp(3rem,calc(2rem + 4vw),6rem);

  --leading-display:.92;   /* condensed display sets tight */
  --leading-title:1.2; --leading-body:1.65;
  --tracking-display:.005em; --tracking-label:.16em;

  /* ---- Space ---- */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.5rem; --space-6:2rem; --space-7:2.5rem; --space-8:3rem;
  --space-9:4rem; --space-10:5rem; --space-11:6rem;
  --container-max:1400px; --container-padding:clamp(20px,5vw,72px);
  --section-padding-y:clamp(72px,9vw,140px);
  --grid-gap:clamp(14px,1.6vw,26px);
  --card-padding:clamp(20px,2vw,30px);

  /* ---- Hard-edged geometry: thermal panels, not soft cards.
          Depth comes from coloured glow, never grey drop shadow —
          grey reads as mud on near-black. ---- */
  --radius:2px;
  --glow-heat:0 0 0 1px rgba(255,106,61,.34),0 0 44px rgba(255,106,61,.24);
  --glow-cool:0 0 0 1px rgba(77,163,255,.28),0 0 44px rgba(77,163,255,.2);

  /* ---- Motion. Everything eases out; no bounce, elastic or spring —
          the tone is authoritative, not playful. ---- */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --duration-fast:200ms; --duration-base:400ms;
  --duration-slow:800ms; --duration-reveal:880ms; --duration-marquee:40s;
  --reveal-distance:26px;
  --nav-h:82px;

  /* ---- Thermal bloom. Position and intensity are written by
          js/motion.js on scroll. ---- */
  --bloom-x:24%; --bloom-y:16%; --bloom-a:.2;
}