/* Foundational styles shared across all pages. */

:root {
  --bg-base:      #07070f;
  --bg-surface:   #0d0d1a;
  --bg-card:      #111827;
  --cyan:         #00e5ff;
  --magenta:      #e040fb;
  --amber:        #ffab00;
  --green:        #39ff14;
  --text-primary: #e2e8f0;
  --text-muted:   #64748b;
  --border:       rgba(0, 229, 255, 0.12);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: 'Rajdhani', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  min-height: 100vh;
}

/* ── UTILITIES ────────────────────────────────── */
.mono         { font-family: 'Share Tech Mono', monospace; }
.label        { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); }
.glow-cyan    { text-shadow: 0 0 8px rgba(0,229,255,0.8), 0 0 24px rgba(0,229,255,0.4); }
.glow-magenta { text-shadow: 0 0 8px rgba(224,64,251,0.8), 0 0 24px rgba(224,64,251,0.4); }
.border-glow  { box-shadow: 0 0 0 1px var(--border), 0 0 16px rgba(0,229,255,0.06); }

.scanlines { position: relative; }
.scanlines::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0, 229, 255, 0.012) 2px,
    rgba(0, 229, 255, 0.012) 4px
  );
  pointer-events: none;
}