/* ───────────────────────── GFXWRLD LAB · shared chrome ─────────────────────────
   Single source of truth for cross-module UI foundations. Loaded by BOTH the
   Text Effects app (index.html, before styles.css) and the 3D module
   (3d/index.html, before its inline <style>). Anything here is GUARANTEED
   identical across the two modules, so this class of drift (tokens, scrollbars,
   focus rings) can't recur. Module-specific layout stays in each file.        */

:root {
  --bg: #0a0a0b;
  --panel: #111113;
  --panel-2: #151517;
  --edge: #232327;
  --edge-soft: #1b1b1f;
  --edge-hover: #34343a;     /* input/select hover border */
  --txt: #d8d8da;
  --dim: #77777e;
  --faint: #4a4a52;
  --volt: #dcef6f;
  --volt-dim: #dcef6f66;
  --volt-bg: #dcef6f14;
  --slider-thumb: #e8e8ea;   /* range thumb (inactive) */
  --mono: 'IBM Plex Mono', monospace;
  /* brand uses the technical face everywhere — --sans intentionally aliases the
     mono stack. (Revert to 'Helvetica Neue', Helvetica, Arial, sans-serif to undo.) */
  --sans: var(--mono);
}

* { box-sizing: border-box; }

/* dark, thin scrollbars — identical in both modules */
html { scrollbar-width: thin; scrollbar-color: var(--edge) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--edge); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* close (X) button for the email-capture popups, top-right of the card */
.gate-close {
  position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; padding: 0;
  display: flex; align-items: center; justify-content: center; border-radius: 8px;
  background: none; border: 1px solid transparent; color: var(--dim);
  font-size: 16px; line-height: 1; cursor: pointer;
}
.gate-close:hover { color: var(--txt); border-color: var(--edge); }

/* legal fine print under email-collection forms (shared by both modules) */
.legal-fineprint { margin: 14px 0 0; text-align: center; font-family: var(--mono); font-size: 10.5px; line-height: 1.5; color: var(--faint); }
.legal-fineprint a { color: var(--dim); text-decoration: underline; }
.legal-fineprint a:hover { color: var(--volt); }

/* keyboard focus ring — visible, on-brand, consistent */
:focus { outline: none; }
:focus-visible {
  outline: 1px solid var(--volt);
  outline-offset: 1px;
  border-radius: 2px;
}