/* Base Styles & CSS Variables */

:root {
  /* Gradient Colors */
  --gradient-color-1: hsl(20, 80%, 70%);
  --gradient-color-2: hsl(180, 70%, 60%);
  --gradient-color-3: hsl(280, 60%, 50%);
  --gradient-angle: 45deg;
  --gradient-speed: 60s;
  
  /* Grain & Texture */
  --grain-opacity: 0.03;
  
  /* Typography */
  --font-mono: 'Courier New', Courier, monospace;
  --font-size-base: 14px;
  --font-size-large: 18px;
  
  /* Spacing */
  --spacing-unit: 8px;
  
  /* Z-index layers */
  --z-background: 0;
  --z-particles: 10;
  --z-patterns: 20;
  --z-text: 30;
  --z-glitch: 40;
  --z-interaction: 50;
}

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  color: #ffffff;
  background: #000000;
}

body {
  position: relative;
}

/* Canvas */
#canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-particles);
  pointer-events: none;
}

/* Prevent text selection during interaction */
body.interacting {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

/* Cursor */
body {
  cursor: crosshair;
}

/* Accessibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Performance hints */
.gpu-accelerated {
  transform: translateZ(0);
  will-change: transform;
}