frontend/src/index.css

@import "tailwindcss";

/* ── Custom design tokens ────────────────────────────────── */
:root {
  --bg-primary: #0B0F19;
  --bg-secondary: #111827;
  --bg-card: #151C2C;
  --bg-elevated: #1A2236;
  --border-subtle: #1E293B;
  --border-active: #334155;
  --text-primary: #E2E8F0;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;
  --accent-green: #00FF88;
  --accent-amber: #FFAA00;
  --accent-red: #FF4455;
  --accent-blue: #63B3ED;
  --accent-purple: #A78BFA;
  --glass-bg: rgba(21, 28, 44, 0.7);
  --glass-border: rgba(30, 41, 59, 0.6);
}

/* ── Base ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #1E293B; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #334155; }

/* ── Monaco editor overrides ─────────────────────────────── */
.monaco-editor .margin,
.monaco-editor,
.monaco-editor-background,
.monaco-editor .inputarea.ime-input {
  background-color: #0D1117 !important;
}

/* ── Animations ──────────────────────────────────────────── */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.3); }
  50% { box-shadow: 0 0 20px 4px rgba(0, 255, 136, 0.15); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes terminal-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

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

.shimmer-loading {
  background: linear-gradient(90deg, #1E293B 25%, #334155 50%, #1E293B 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

.terminal-cursor::after {
  content: '▌';
  animation: terminal-blink 1s step-end infinite;
  color: var(--accent-green);
}

/* ── Glass card utility ──────────────────────────────────── */
.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
}