@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; }