:root {
  /* Colors */
  --bg-dark: #070913;
  --bg-deep: #0a0d1d;
  --accent-cyan: #00f0ff;
  --accent-magenta: #ff007f;
  --accent-violet: #7000ff;
  --text-main: #f0f3f9;
  --text-muted: #8fa0c0;
  
  /* Glassmorphism */
  --glass-bg: rgba(10, 13, 29, 0.6);
  --glass-border: rgba(0, 240, 255, 0.15);
  --glass-border-hover: rgba(0, 240, 255, 0.3);
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  
  /* Fonts */
  --font-display: 'Orbitron', sans-serif;
  --font-body: 'Space Grotesk', sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
}

body {
  background-color: var(--bg-dark);
  background-image: 
    linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
    radial-gradient(circle at 20% 30%, rgba(112, 0, 255, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(0, 240, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(255, 0, 127, 0.05) 0%, transparent 60%);
  background-size: 100% 4px, 100% 100%, 100% 100%, 100% 100%;
  color: var(--text-main);
  font-family: var(--font-body);
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

/* Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(10, 13, 29, 0.3);
}

::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-cyan);
}

/* Background elements */
#bg-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}