/* ===============================
   MODE TOKENS (single source)
   Base backgrounds/panels stay dark/neutral.
   Accents + glows change per mode via body[data-mode].
   =============================== */

:root{
  /* neutrals */
  --bg: #07090c;
  --text-main: rgba(245,247,250,0.92);
  --text-dim: rgba(245,247,250,0.62);
  --border: rgba(245,247,250,0.10);
  --surface: rgba(10,14,18,0.58);
  --surface-strong: rgba(10,14,18,0.92);

  /* accent defaults (fallback) */
  --accent: #2ef3e7;
  --accent-rgb: 46 243 231;
  --glow: rgba(46,243,231,0.45);

  /* spotlight (background) */
  --spotlight: rgba(46,243,231,0.16);
}

/* VOID — black bg, ash spotlight */
:root[data-mode="void"], html[data-mode="void"], body[data-mode="void"]{
  --accent: #d9d9d9;
  --accent-rgb: 217 217 217;
  --glow: rgba(217,217,217,0.42);
  --spotlight: rgba(217,217,217,0.14);
}

/* OUTLXW — black bg, teal spotlight */
:root[data-mode="outlxw"], html[data-mode="outlxw"], body[data-mode="outlxw"]{
  --accent: #2ef3e7;
  --accent-rgb: 46 243 231;
  --glow: rgba(46,243,231,0.45);
  --spotlight: rgba(46,243,231,0.16);
}

/* PULSE — black bg, purple spotlight */
:root[data-mode="pulse"], html[data-mode="pulse"], body[data-mode="pulse"]{
  --accent: #b44cff;
  --accent-rgb: 180 76 255;
  --glow: rgba(180,76,255,0.45);
  --spotlight: rgba(180,76,255,0.16);
}


/* ===============================
   BASE LAYOUT — NO THEME
   =============================== */

html,body{
  background: var(--bg);
  color: var(--text-main);
}

body::before{
  content:"";
  position: fixed;
  inset: 0;
  background: radial-gradient(
    circle at top,
    var(--spotlight),
    transparent 60%
  );
  pointer-events:none;
  z-index:-1;
}

/* generic surfaces */
.card,
.panel,
.glass{
  background: var(--surface);
  border: 1px solid var(--border);
  backdrop-filter: blur(14px);
}

/* buttons */
.btn,
button{
  background: transparent;
  color: var(--text-main);
  border: 1px solid var(--border);
}

.btn:hover,
button:hover{
  border-color: var(--accent);
  box-shadow: 0 0 14px var(--glow);
}