/* CSS Variables and Design Tokens matching constraints */
:root {
  --background: 240 10% 4%;
  --foreground: 240 5% 96%;
  --card: 240 6% 8%;
  --card-border: 240 5% 15%;
  --primary: 345 100% 55%; /* Cinematic Red Accent */
  --secondary: 185 100% 50%; /* Electric Cyan */
  --muted: 240 4% 65%;
  --accent: 265 80% 60%; /* Deep Void Purple */
  --border: 240 5% 16%;
  
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 25px -3px rgba(0, 0, 0, 0.7), 0 4px 6px -2px rgba(0, 0, 0, 0.7);
  
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  overflow-x: hidden;
  letter-spacing: -0.01em;
}

h1, h2, h3, .cinematic-title {
  font-family: 'Cinzel', serif;
}

.code-font {
  font-family: 'Space Grotesk', sans-serif;
}

/* Anime scanline overlay effect */
.scanlines {
  position: relative;
  overflow: hidden;
}
.scanlines::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 255, 0.01), rgba(0, 0, 255, 0.03));
  z-index: 10;
  background-size: 100% 4px, 6px 100%;
  pointer-events: none;
}

/* Premium Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: hsl(var(--background));
}
::-webkit-scrollbar-thumb {
  background: hsl(var(--card-border));
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--primary));
}

/* Custom Glowing Effects */
.glow-red {
  box-shadow: 0 0 20px rgba(255, 42, 95, 0.15);
}
.glow-cyan {
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.15);
}
.glow-purple {
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.15);
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.2; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.05); }
}

.animate-pulse-glow {
  animation: pulse-glow 3s infinite ease-in-out;
}

/* Custom Manga Tone Background */
.manga-screentone {
  background-image: radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 0);
  background-size: 12px 12px;
}