/* ============================================================
   HUMANX · hx-design.css — Design Language Wave 2 (Jul 2026)
   ------------------------------------------------------------
   The global refinement layer from the Design Direction (W1):
   • Aurum refined — crisper, brighter gold (AA contrast on ink)
   • Plasma — the new cool signal reserved for AI / live / data
   • Precision numerals — every stat in tabular mono
   • Surgical buttons — flat metal + top-light hairline, no gloss
   • A11y — visible focus, selection tint
   Loaded LAST (before </body>) so it wins the cascade without
   touching any markup. Removing this file restores the old look.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;700&display=swap');

:root{
  /* Aurum scale — replaces the muddier #B8965A family */
  --gold:#D6B368;
  --goldl:#E4C67E;
  --gold-l:#E4C67E;
  --gold-x:#EDD9A3;
  /* Plasma — intelligence / live / computed. Use sparingly. */
  --hx-plasma:#7FE6DA;
  --hx-plasma-2:#54C9C4;
  --hx-plasma-dim:rgba(127,230,218,.14);
}

/* ---- precision numerals: stats read as data, not prose ---- */
.acc-val, .mt-val, .mc-val, .trm-rnum, .log-detail-score,
.td-score-ring, .hxix-status, .mono-num, .stat-v, .kpi-v{
  font-family:'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}

/* ---- surgical primary buttons: flat metal, top-light, no 2014 gloss ----
   Scoped to real button/anchor elements only — .cta/.btn are also used
   as CONTAINER classes on some pages (e.g. the welcome bottom bar). */
button.btn:not([class*="ghost"]):not([class*="line"]):not([class*="alt"]),
a.btn:not([class*="ghost"]):not([class*="line"]):not([class*="alt"]),
button.cta{
  background:var(--goldl, #E4C67E) !important;
  background-image:none !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30), 0 10px 30px -10px rgba(228,198,126,.42) !important;
}
button.btn:not([class*="ghost"]):active, button.cta:active{ transform:scale(.985); }

/* soften the sheen sweep — premium shimmer, not a glare */
.btn::after{ opacity:.5; }

/* ---- live / AI signal utilities (adopt gradually in markup) ---- */
.hx-live{ color:var(--hx-plasma); }
.hx-live-dot{ display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--hx-plasma); box-shadow:0 0 10px var(--hx-plasma);
  animation:hxPulse 1.9s ease-in-out infinite; }
@keyframes hxPulse{ 0%,100%{opacity:1} 50%{opacity:.35} }
.hx-ai-chip{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--hx-plasma); background:var(--hx-plasma-dim);
  border:1px solid var(--hx-plasma-dim); border-radius:100px; padding:4px 10px; }

/* ---- HUMANX Index ring — the emblem, elevated ---- */
.td-score-ring, .hxix-ring{
  filter:drop-shadow(0 0 30px rgba(228,198,126,.26)) !important;
}
/* the recalc / live status reads as "computed" — Plasma, not gold */
.hxix-live, .td-live, .recalc, [data-live]{ color:var(--hx-plasma) !important; }

/* ---- premium onboarding wheel: the selected value gets weight ---- */
.wheel-sel, .ob-wheel .on, .picker-sel{ color:var(--gold-x, #EDD9A3) !important; }

/* ---- refined hairline seam on glassy panels (opt-in, non-destructive) ---- */
.hx-seam{ position:relative; }
.hx-seam::before{ content:''; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent); pointer-events:none; }

/* ---- HUMANX IQ composer ----
   W68 founder correction: the send button is GOLD — plasma stays for live/AI
   dots and micro-signals, never the primary action. Geometry matches the mic
   buttons (42px, radius 12) so the composer reads as one family. */
.composer:focus-within{
  border-color:rgba(228,198,126,.40) !important;
  box-shadow:0 0 0 1px rgba(228,198,126,.18), 0 8px 30px -12px rgba(228,198,126,.30) !important;
}
.composer .send, .composer button.send{
  width:42px !important; height:42px !important; border-radius:12px !important;
  background:var(--goldl, #E4C67E) !important; color:#141007 !important; background-image:none !important;
  border:1px solid rgba(255,255,255,.18) !important; font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 0 18px -6px rgba(228,198,126,.55) !important;
  display:flex; align-items:center; justify-content:center; padding:0 !important;
}
.composer .send:active{ transform:scale(.96); }

/* ---- micro-materials ---- */
::selection{ background:rgba(228,198,126,.26); }
*:focus-visible{ outline:2px solid rgba(127,230,218,.55); outline-offset:2px; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.10); border-radius:8px;
  border:3px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover{ background:rgba(228,198,126,.28); border:3px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-track{ background:transparent; }