:root {
  --bg: #0d0f1a;
  --editor-bg: #1e1e2e;
  --neon: #4ade80;
  --cyan: #22d3ee;
}

html.light {
  --bg: #f4f5f7;
  --editor-bg: #ffffff;
  --neon: #059669;
  --cyan: #0891b2;
}

html.light body { color: #1e293b; }

html.light .min-h-screen { color: #1e293b; }
html.light textarea { color: #1e293b !important; }
html.light .neon-glow { text-shadow: none; }
html.light header { background: #ffffff !important; }
html.light footer, html.light .text-slate-500 { color: #64748b; }

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "JetBrains Mono", monospace;
  background: var(--bg);
}

/* radial atmosphere on dark bg */
.min-h-screen {
  background-image:
    radial-gradient(circle at 15% 0%, rgba(74, 222, 128, 0.08), transparent 40%),
    radial-gradient(circle at 85% 100%, rgba(34, 211, 238, 0.08), transparent 45%);
}
html.light .min-h-screen { background-image: none; }

.neon-glow {
  text-shadow: 0 0 8px rgba(74, 222, 128, 0.5), 0 0 20px rgba(74, 222, 128, 0.25);
}

.cursor-blink {
  animation: blink 1s step-end infinite;
}
@keyframes blink {
  50% { opacity: 0; }
}

/* subtle CRT scanline overlay on header */
.crt::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.02) 0px,
    rgba(255, 255, 255, 0.02) 1px,
    transparent 1px,
    transparent 3px
  );
  opacity: 0.6;
}
html.light .crt::after { display: none; }

textarea::-webkit-scrollbar { width: 10px; height: 10px; }
textarea::-webkit-scrollbar-thumb {
  background: #3a3a52;
  border-radius: 5px;
}
textarea::-webkit-scrollbar-track { background: transparent; }

kbd { font-family: "JetBrains Mono", monospace; font-size: 10px; }