@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap'); @tailwind base; @tailwind components; @tailwind utilities; :root { --bg-primary: #0a0a1a; --bg-secondary: #06060f; --bg-card: rgba(255, 255, 255, 0.06); --bg-card-hover: rgba(255, 255, 255, 0.10); --border-subtle: rgba(255, 255, 255, 0.08); --text-primary: #ffffff; --text-secondary: rgba(255, 255, 255, 0.6); --text-muted: rgba(255, 255, 255, 0.4); --accent-electric: #3b82f6; --accent-signal: #22c55e; --accent-indigo: #6366f1; --accent-purple: #a78bfa; --glass-bg: rgba(255, 255, 255, 0.06); --glass-border: rgba(255, 255, 255, 0.08); --glass-hover: rgba(255, 255, 255, 0.10); --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-hover: rgba(255, 255, 255, 0.25); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--bg-primary); color: var(--text-primary); font-family: 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif; } ::selection { background: rgba(59, 130, 246, 0.3); color: white; } ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); } @layer utilities { .glass { background: var(--glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--glass-border); } .glass-hover:hover { background: var(--glass-hover); } .gradient-text { background: linear-gradient(135deg, var(--accent-electric), var(--accent-indigo), var(--accent-purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .gradient-text-signal { background: linear-gradient(135deg, var(--accent-signal), #34d399, var(--accent-electric)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .text-shadow-glow { text-shadow: 0 0 40px rgba(59, 130, 246, 0.3); } .glow-blue { box-shadow: 0 0 30px rgba(59, 130, 246, 0.15), 0 0 60px rgba(59, 130, 246, 0.05); } .glow-signal { box-shadow: 0 0 20px rgba(34, 197, 94, 0.15); } .mono-label { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); } .enterprise-grid { background-image: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px); background-size: 60px 60px; } .section-alt { background: var(--bg-secondary); } } /* === Light Mode === */ .theme-light { --bg-primary: #ffffff; --bg-secondary: #f8fafc; --bg-card: #f8fafc; --bg-card-hover: #f1f5f9; --border-subtle: #e2e8f0; --text-primary: #0f172a; --text-secondary: #334155; --text-muted: #64748b; --accent-electric: #2563eb; --accent-signal: #059669; --accent-indigo: #4f46e5; --accent-purple: #7c3aed; --glass-bg: #f8fafc; --glass-border: #e2e8f0; --glass-hover: #f1f5f9; --scrollbar-thumb: #cbd5e1; --scrollbar-hover: #94a3b8; } .theme-light body { color: var(--text-primary); } .theme-light ::selection { background: rgba(37, 99, 235, 0.15); color: #0f172a; } /* Text overrides */ .theme-light .text-white { color: #0f172a; } .theme-light .text-white\/80 { color: #1e293b; } .theme-light .text-white\/70 { color: #334155; } .theme-light .text-white\/60 { color: #475569; } .theme-light .text-white\/50 { color: #64748b; } .theme-light .text-white\/40 { color: #64748b; } .theme-light .text-white\/30 { color: #94a3b8; } .theme-light .text-white\/20 { color: #cbd5e1; } /* Card backgrounds */ .theme-light .bg-white\/\[0\.06\], .theme-light .bg-white\/\[0\.04\], .theme-light .bg-white\/\[0\.03\] { background-color: #f8fafc !important; } .theme-light .border-white\/\[0\.08\], .theme-light .border-white\/\[0\.06\], .theme-light .border-white\/10 { border-color: #e2e8f0 !important; } /* No blur in light mode */ .theme-light .backdrop-blur-xl, .theme-light .backdrop-blur { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Navbar */ .theme-light .bg-enterprise-dark\/80 { background-color: rgba(255, 255, 255, 0.9) !important; } /* Enterprise grid */ .theme-light .enterprise-grid { background-image: linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px); } /* Gradient text — stronger in light */ .theme-light .gradient-text { background: linear-gradient(135deg, #2563eb, #4f46e5, #7c3aed) !important; -webkit-background-clip: text !important; background-clip: text !important; } .theme-light .gradient-text-signal { background: linear-gradient(135deg, #059669, #10b981, #2563eb) !important; -webkit-background-clip: text !important; background-clip: text !important; } /* Mono label */ .theme-light .mono-label { color: #64748b; } /* Status dots */ .theme-light .text-shadow-glow { text-shadow: none; } .theme-light .glow-blue { box-shadow: 0 4px 14px -3px rgba(37, 99, 235, 0.15); } /* Accent backgrounds */ .theme-light .bg-accent-electric\/10 { background-color: #eff6ff !important; } .theme-light .bg-accent-electric\/5 { background-color: #f0f9ff !important; } .theme-light .bg-accent-indigo\/10 { background-color: #eef2ff !important; } .theme-light .bg-accent-indigo\/5 { background-color: #eef2ff !important; } .theme-light .bg-accent-purple\/10 { background-color: #faf5ff !important; } .theme-light .bg-accent-purple\/\[0\.04\] { background-color: #faf5ff !important; } .theme-light .bg-amber-500\/10 { background-color: #fefce8 !important; } /* Colored borders */ .theme-light .border-red-500\/20 { border-color: #fecaca !important; } .theme-light .border-red-500\/15 { border-color: #fecaca !important; } .theme-light .border-green-500\/20 { border-color: #bbf7d0 !important; } .theme-light .border-green-500\/15 { border-color: #bbf7d0 !important; } .theme-light .border-accent-electric\/30 { border-color: #bfdbfe !important; } .theme-light .border-accent-indigo\/30 { border-color: #c7d2fe !important; } .theme-light .border-accent-purple\/30 { border-color: #ddd6fe !important; } .theme-light .border-accent-purple\/20 { border-color: #e9d5ff !important; } .theme-light .border-accent-electric\/20 { border-color: #bfdbfe !important; } /* Colored text */ .theme-light .text-red-400 { color: #dc2626 !important; } .theme-light .text-green-400 { color: #059669 !important; } .theme-light .text-amber-400 { color: #d97706 !important; } .theme-light .text-accent-electric { color: #2563eb !important; } .theme-light .text-accent-indigo { color: #4f46e5 !important; } .theme-light .text-accent-purple { color: #7c3aed !important; } .theme-light .text-accent-signal\/80 { color: #059669 !important; } /* Colored backgrounds for tinted cards */ .theme-light .bg-red-500\/\[0\.04\] { background-color: #fef2f2 !important; } .theme-light .bg-red-500\/\[0\.03\] { background-color: #fef2f2 !important; } .theme-light .bg-green-500\/\[0\.04\] { background-color: #f0fdf4 !important; } .theme-light .bg-green-500\/\[0\.03\] { background-color: #f0fdf4 !important; } .theme-light .bg-red-500\/10 { background-color: #fef2f2 !important; } .theme-light .bg-blue-500\/10 { background-color: #eff6ff !important; } .theme-light .bg-green-500\/10 { background-color: #f0fdf4 !important; } /* Terminal / code blocks */ .theme-light .bg-enterprise-darker { background-color: #f1f5f9 !important; } /* Chat panel */ .theme-light .bg-black\/90 { background-color: #ffffff !important; border: 1px solid #e2e8f0 !important; } .theme-light .bg-black\/60 { background-color: rgba(0, 0, 0, 0.1) !important; } /* Hover states */ .theme-light .hover\:bg-white\/\[0\.06\]:hover, .theme-light .hover\:bg-white\/\[0\.04\]:hover { background-color: #f1f5f9 !important; } .theme-light .hover\:bg-white\/20:hover { background-color: #e2e8f0 !important; } /* Shadows */ .theme-light .shadow-lg { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.06) !important; } .theme-light .shadow-2xl { box-shadow: 0 10px 25px -5px rgba(0,0,0,0.08) !important; } /* Table */ .theme-light .hover\:bg-white\/\[0\.02\]:hover { background-color: #f8fafc !important; } .theme-light .bg-white\/\[0\.02\] { background-color: #f8fafc !important; }