/* ============================================================================
   steer-theme.css — shared testers.ai design system, extracted from the
   steer (tai_steer.html) page. Include this LAST in <head> (after a page's own
   inline <style>) so these design tokens win the cascade and the page re-skins
   to the steer look: near-black background, mint accent, glass surfaces, the
   steer type scale. Token-driven pages pick this up automatically; the aliases
   below cover the custom-property names used across the older cloud pages.
   ============================================================================ */

:root{
  /* canonical steer tokens */
  --bg:#06090d; --card:#0a0e14; --line:#1c2230;
  --txt:#f1f5f7; --mid:#cdd5ce; --dim:#7d8a82;
  --mint:#86efac; --mint2:#4ade80;
  --mbg:rgba(134,239,172,.10); --mbd:rgba(134,239,172,.35);
  --gold:#f0c878; --indigo:#818cf8;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

  /* ---- aliases: map the var names other cloud pages use onto steer values ---- */
  --bg-base:#06090d; --bg-tint:#0a0e14; --bg-0:#06090d; --bg-1:#0a0e14;
  --bg-raised:#0f141c; --surface:#0a0e14; --panel:#0a0e14; --card-bg:#0a0e14;
  --raised:#0f141c; --elevated:#10151d;
  --ink:#f1f5f7; --fg:#f1f5f7; --text:#f1f5f7; --heading:#f1f5f7; --title:#f1f5f7;
  --muted:#cdd5ce; --text-mid:#cdd5ce; --textmid:#cdd5ce;
  --faint:#7d8a82; --subtle:#7d8a82; --text-dim:#7d8a82; --textdim:#7d8a82;
  --border:#1c2230; --border-color:#1c2230; --divider:#1c2230; --edge:#1c2230;
  --accent:#4ade80; --accent-2:#34e5da; --accent-3:#f0c878;
  --accent2:#34e5da; --accent3:#f0c878; --brand:#4ade80; --primary:#4ade80;
  --green:#4ade80; --good:#4ade80; --success:#4ade80; --ok:#4ade80;
}

/* Base surface + type, matching the steer page. Placed after the page's own
   inline styles (via link order) so it wins where specificity is equal. */
html{ background:#06090d; scroll-behavior:smooth; }
body{
  background-color:#06090d;
  background-image:radial-gradient(1100px 520px at 80% -8%, rgba(134,239,172,.06), transparent 60%);
  background-repeat:no-repeat;
  background-attachment:fixed;
  color:var(--txt);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}

/* Keyboard focus ring, consistent with steer. */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid #4ade80; outline-offset:2px;
}

/* Optional shared components — opt-in classes mirroring steer's primitives.
   Pages can adopt these for closer parity without re-deriving the styles. */
.st-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 22px;border-radius:12px;border:1px solid var(--mbd);cursor:pointer;
  color:#04140a;font:700 15px var(--sans);
  background:linear-gradient(180deg,#a7f3c0,var(--mint2));
  box-shadow:0 8px 20px -8px rgba(74,222,128,.55);text-decoration:none;
  transition:transform .12s,box-shadow .16s,opacity .16s}
.st-btn:hover{transform:translateY(-1px)}
.st-btn.ghost{background:none;box-shadow:none;color:var(--txt);border-color:var(--line)}
.st-btn.ghost:hover{border-color:var(--mbd);color:var(--mint)}
.st-card{border:.5px solid var(--line);border-radius:16px;padding:22px 20px;background:var(--card)}
.st-input{width:100%;padding:13px 15px;border-radius:11px;color:var(--txt);
  background:rgba(0,0,0,.32);border:1px solid var(--line);outline:none;font:14px var(--sans);
  transition:border-color .16s,box-shadow .16s}
.st-input:focus{border-color:var(--mint);box-shadow:0 0 0 3px rgba(74,222,128,.28)}
.st-input::placeholder{color:var(--dim)}
