/* theme.css — the ONE voidblack token source for a glitch-app.
   Every other stylesheet (shell.css, mobile.css, chat.css, term.css) and every
   page (index.html, login.html) links THIS and uses var(--…). fullscreen.js
   keeps a tiny literal-colour fallback for the A2HS coach only, because that
   coach can be shown before any stylesheet has loaded.
   Placeholders used: none (pure tokens — an app re-skins by overriding :root). */
:root{
  --void-black:#030d0d; --void-dark:#001a18; --void-deep:#001510;
  --teal:#00f5e4; --teal-mid:#00c8bb; --teal-dim:#00a89a; --teal-trace:#005550; --teal-dark:#004d47;
  --txt:#a8e8e4; --dim:#4a6a68; --err:#e06c75;
  --mono:'JetBrains Mono','Fira Code',ui-monospace,SFMono-Regular,Menlo,monospace;
  --glass:rgba(0,21,16,.82);
  --ga-bar-h:56px;
  --ga-safe-l:env(safe-area-inset-left); --ga-safe-r:env(safe-area-inset-right);
  --ga-safe-t:env(safe-area-inset-top);  --ga-safe-b:env(safe-area-inset-bottom);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--void-black);color:var(--txt);font-family:var(--mono)}
button,input,select,textarea{font-family:var(--mono)}

/* the floating glass primitive every panel is built from */
.glass{background:var(--glass);border:1px solid var(--teal-trace);border-left:2px solid var(--teal);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);border-radius:8px;
  box-shadow:0 6px 30px rgba(0,0,0,.5),inset 0 0 30px rgba(0,245,228,.03)}

/* shared control primitives */
.pill{background:var(--glass);border:1px solid var(--teal-trace);color:var(--teal-mid);
  padding:8px 14px;border-radius:8px;cursor:pointer;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  transition:color .12s,border-color .12s}
.pill:hover,.pill.on{color:var(--teal);border-color:var(--teal)}
.btn{border:0;border-radius:7px;cursor:pointer;font-size:13px;font-weight:700;padding:10px 14px;
  letter-spacing:.03em;white-space:nowrap;transition:filter .12s,border-color .12s,color .12s}
.btn.primary{background:linear-gradient(160deg,#00f5e4,#00b3a6);color:#02201d;
  box-shadow:0 0 10px rgba(0,245,228,.28),inset 0 1px 0 rgba(255,255,255,.25)}
.btn.primary:hover{filter:brightness(1.1)}
.btn.ghost{background:transparent;border:1px solid var(--teal-trace);color:var(--teal-mid);font-weight:600}
.btn.ghost:hover,.btn.ghost.on{border-color:var(--teal);color:var(--teal)}
.btn:disabled{opacity:.4;cursor:not-allowed;filter:none}
input,textarea,select{background:var(--void-deep);border:1px solid var(--teal-trace);color:var(--txt);
  padding:10px 13px;border-radius:7px;font-size:16px;outline:none;transition:border-color .15s}
input::placeholder,textarea::placeholder{color:var(--dim)}
input:focus,textarea:focus{border-color:var(--teal);box-shadow:0 0 14px rgba(0,245,228,.12)}

/* faint PCB grid — apply to any full-bleed container */
.ga-grid::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(var(--teal-dark) .5px,transparent .5px),
                   linear-gradient(90deg,var(--teal-dark) .5px,transparent .5px);
  background-size:26px 26px;opacity:.05}