/* ============================================================
   KINK IQ — ONYX cockpit
   Design tokens + global resets, keyframes, focus ring.
   Single theme — matte-black leather, blood-red accent, warm ink.
   Every accent/bloom/line routes through vars so the whole
   field + elements share one system. Signature: the Arc
   Reactor energy gauge (AI token balance).
   ============================================================ */
:root{
  /* theme-agnostic constants */
  --amber:#F5A524; --green:#34D399; --rose:#FB5A87; --violet:#A78BFA;
  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Plus Jakarta Sans',system-ui,sans-serif;
  --font-mono:'DM Mono','SFMono-Regular',ui-monospace,monospace;
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:28px;
  --rail:84px; --maxw:1080px;
  --ease:cubic-bezier(.16,1,.3,1);
  /* --glow-rgb is theme-defined; the elevation shadow reads it */
  --glow:0 0 0 1px var(--line), 0 24px 60px -28px rgba(0,0,0,.9), 0 0 40px -20px rgba(var(--glow-rgb),.25);
  color-scheme:dark;   /* native selects, checkboxes & date/time pickers render dark */
}

/* ── Kink IQ — Leather-dungeon: matte-black leather · blood-red accent · warm ink ──── */
/* [data-theme="blue"]/[="pink"] selectors kept as harmless aliases so any
   cached theme value still resolves to this one canonical palette. */
:root, :root[data-theme="blue"], :root[data-theme="pink"]{
  --void:#0A0708; --panel:#150D0F; --panel-2:#1B1113; --panel-3:#251619;
  --line:rgba(200,16,46,.16); --line-strong:rgba(200,16,46,.34);
  --ink:#F6EDEA; --ink-2:#CBB7B3; --ink-3:#94726F; --ink-4:#A2867F;
  --reactor:#C8102E; --reactor-2:#E63950; --reactor-deep:#7A0A1E;
  --on-reactor:#FFFFFF;
  --glow-rgb:200,16,46;
  --grad-a:#C8102E; --grad-b:#E63950;   /* brand gradient — blood-red */
  --bg-field:radial-gradient(1200px 780px at 78% -14%, #2A0A12 0%, #14060A 42%, #050304 100%);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:var(--font-body); color:var(--ink);
  background:var(--bg-field); background-attachment:fixed;
  -webkit-font-smoothing:antialiased; overflow:hidden; position:relative;
  overflow-wrap:break-word;   /* inherited safety net: long unbroken strings wrap instead of bleeding off-screen */
}
img{max-width:100%}   /* never let an image force horizontal overflow on mobile */
/* technical grid + ambient reactor bloom (both re-hue via --glow-rgb) */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(var(--glow-rgb),.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(var(--glow-rgb),.035) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(1200px 800px at 70% -5%,#000 30%,transparent 75%);
  mask-image:radial-gradient(1200px 800px at 70% -5%,#000 30%,transparent 75%);}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(900px 600px at 78% -10%,rgba(var(--glow-rgb),.16),transparent 60%),
             radial-gradient(700px 500px at -10% 110%,rgba(var(--glow-rgb),.10),transparent 55%);}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea{font-family:inherit}
::-webkit-scrollbar{width:0;height:0}
*{scrollbar-width:none}
.mono{font-family:var(--font-mono)}
/* keyboard focus ring — consistent across every interactive element */
:focus-visible{outline:2px solid var(--reactor);outline-offset:2px;border-radius:3px}
@keyframes fadeup{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes scan{0%{transform:translateY(-100%)}100%{transform:translateY(900%)}}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}