:root {
  --bg-dark: #050007;
  --bg-darker: #0a0014;
  --bg-card: rgba(28, 0, 44, 0.6);
  --bg-panel: rgba(45, 11, 61, 0.3);
  --bg-hover: rgba(45, 11, 61, 0.4);

  --text: #d0d0e0;
  --text-bright: #d0c8ff;
  --text-dim: #8080a0;
  --text-muted: #6060a0;

  --primary: #b48cff;
  --primary-dark: #8060c0;

  --secondary: #57cbde;
  --accent: #ff6b9d;
  --accent-dark: #ff0055;

  --border: rgba(180, 140, 255, 0.15);
  --border-bright: rgba(180, 140, 255, 0.3);
  --border-hover: rgba(180, 140, 255, 0.5);
  --shadow: rgba(0, 0, 0, 0.3);

  --gradient-card: linear-gradient(135deg, rgba(28, 0, 44, 0.4), rgba(45, 11, 61, 0.3));
  --gradient-panel: linear-gradient(135deg, rgba(28, 0, 44, 0.3), rgba(45, 11, 61, 0.2));

  --font-header: 'OwreKynge', serif;
  --font-body: 'terminus', 'Courier New', monospace;
  --font-pixel: 'pix', monospace;
  --font-mono: 'Monocraft', monospace;
}

body {
  background: var(--bg-dark);
  color: var(--text);
  position: relative;
}

h1, h2, h3 {
  color: var(--primary);
  text-shadow: 0 0 10px rgba(180, 140, 255, 0.3);
}

a {
  color: var(--secondary);
}

a:hover {
  color: var(--accent);
  text-shadow: 0 0 8px rgba(255, 107, 157, 0.4);
}

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 20px 0;
}

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: rgba(10, 0, 20, 0.5);
}

::-webkit-scrollbar-thumb {
  background: rgba(180, 140, 255, 0.4);
  border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(180, 140, 255, 0.6);
}