/**
 * base.css
 * Global element defaults and page-level scaffolding only.
 * Component styling lives in glass.css; type lives in typography.css.
 */

body {
  background: var(--bg-void);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
}

/* Ambient background: a very low-opacity animated gradient wash,
   not a busy pattern — keeps focus on content while still feeling alive. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: var(--z-base);
  background:
    radial-gradient(ellipse 80% 50% at 20% 0%, rgba(0, 246, 255, 0.08), transparent),
    radial-gradient(ellipse 80% 50% at 80% 100%, rgba(255, 47, 208, 0.08), transparent);
  pointer-events: none;
}

#app {
  position: relative;
  z-index: 1;
}

a {
  color: var(--neon-cyan);
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--neon-cyan);
  outline-offset: 2px;
}

::selection {
  background: rgba(0, 246, 255, 0.3);
}

/* Scrollbar (WebKit) styled to match the theme; falls back gracefully
   in browsers that don't support these pseudo-elements. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-surface); }
::-webkit-scrollbar-thumb {
  background: var(--neon-cyan-dim);
  border-radius: var(--radius-pill);
}