/* ========================================================================== theme-dark.css - Dark Theme Overrides for EzTuti Tips Applied when ========================================================================== */ [data-theme="dark"] { /* ---- Backgrounds ---- */ --color-bg-primary: #0a0e17; --color-bg-secondary: #111827; --color-bg-tertiary: #1a2332; /* ---- Text ---- */ --color-text-primary: #f1f5f9; --color-text-secondary: #94a3b8; --color-text-muted: #64748b; /* ---- Accents ---- */ --color-accent-primary: #00ff87; --color-accent-secondary: #00d4ff; /* ---- Semantic Colors ---- */ --color-success: #22c55e; --color-warning: #f59e0b; --color-error: #ef4444; --color-info: #3b82f6; /* ---- Borders ---- */ --color-border: rgba(148, 163, 184, 0.12); --color-border-hover: rgba(148, 163, 184, 0.25); /* ---- Cards & Inputs ---- */ --color-card-bg: #1e293b; --color-input-bg: #0f172a; --color-input-border: rgba(148, 163, 184, 0.2); --color-input-focus: var(--color-accent-primary); /* ---- Gradients ---- */ --gradient-accent: linear-gradient(135deg, #00ff87, #00d4ff); --gradient-accent-hover: linear-gradient(135deg, #00d4ff, #00ff87); --gradient-bg: linear-gradient(180deg, #0a0e17 0%, #111827 100%); --gradient-hero: linear-gradient(135deg, #0a0e17 0%, #111827 50%, #0a0e17 100%); /* ---- Shadows with Glow ---- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4); --shadow-glow: 0 0 20px rgba(0, 255, 135, 0.15), 0 0 40px rgba(0, 255, 135, 0.05); --shadow-glow-accent: 0 0 20px rgba(0, 212, 255, 0.15), 0 0 40px rgba(0, 212, 255, 0.05); --shadow-glow-strong: 0 0 30px rgba(0, 255, 135, 0.25), 0 0 60px rgba(0, 255, 135, 0.1); /* ---- Navbar ---- */ --navbar-bg: rgba(10, 14, 23, 0.85); --navbar-border: rgba(148, 163, 184, 0.08); /* ---- Sidebar ---- */ --sidebar-bg: #0f172a; /* ---- Overlay & Backdrop ---- */ --overlay-bg: rgba(0, 0, 0, 0.6); --backdrop-blur: blur(12px); color-scheme: dark; } /* ---- Dark theme specific element styles ---- */ [data-theme="dark"] ::selection { background: rgba(0, 255, 135, 0.25); color: #f1f5f9; } [data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: #0a0e17; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 4px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #334155; } /* Dark theme placeholder text */ [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: #475569; } /* Dark theme horizontal rule */ [data-theme="dark"] hr { border-color: rgba(148, 163, 184, 0.1); } /* Dark theme code blocks */ [data-theme="dark"] code, [data-theme="dark"] pre { background: #0f172a; color: #e2e8f0; }