/* ============================================= THEME SYSTEM - themes.css Available themes: light, dark, cyber Theme is applied via data-theme attribute on ============================================= */ /* ============================================= LIGHT THEME (Default) ============================================= */ :root, [data-theme="light"] { --color-primary: #4f46e5; --color-primary-hover: #4338ca; --color-primary-light: #eef2ff; --color-primary-rgb: 79, 70, 229; --color-bg: #f8fafc; --color-bg-elevated: #ffffff; --color-surface: #ffffff; --color-surface-alt: #f1f5f9; --color-border: #e2e8f0; --color-text: #1e293b; --color-text-secondary: #64748b; --color-text-muted: #94a3b8; --color-success: #22c55e; --color-success-bg: #f0fdf4; --color-warning: #f59e0b; --color-warning-bg: #fffbeb; --color-error: #ef4444; --color-error-bg: #fef2f2; --color-info: #3b82f6; --color-info-bg: #eff6ff; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --gradient-success: linear-gradient(135deg, #4ade80 0%, #22c55e 100%); --gradient-accent: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); } /* Light theme: add shadow to logo for better visibility */ [data-theme="light"] .logo-img, :root .logo-img { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); } /* ============================================= DARK THEME (Neutral Grayscale - VS Code style) ============================================= */ [data-theme="dark"] { --color-primary: #a78bfa; --color-primary-hover: #c4b5fd; --color-primary-light: #1c1c1c; --color-primary-rgb: 167, 139, 250; --color-bg: #121212; --color-bg-elevated: #1e1e1e; --color-surface: #1e1e1e; --color-surface-alt: #2d2d2d; --color-border: #3d3d3d; --color-text: #e4e4e4; --color-text-secondary: #a0a0a0; --color-text-muted: #6b6b6b; --color-success: #4ade80; --color-success-bg: rgba(74, 222, 128, 0.15); --color-warning: #fbbf24; --color-warning-bg: rgba(251, 191, 36, 0.15); --color-error: #f87171; --color-error-bg: rgba(248, 113, 113, 0.15); --color-info: #60a5fa; --color-info-bg: rgba(96, 165, 250, 0.15); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5); --gradient-primary: linear-gradient(135deg, #a78bfa 0%, #c4b5fd 100%); --gradient-success: linear-gradient(135deg, #4ade80 0%, #22c55e 100%); --gradient-accent: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); } /* Dark theme form inputs - ensure legibility */ [data-theme="dark"] .form-input, [data-theme="dark"] .form-textarea, [data-theme="dark"] .form-select { color: var(--color-text); background-color: var(--color-surface-alt); border-color: var(--color-border); } [data-theme="dark"] .form-input::placeholder, [data-theme="dark"] .form-textarea::placeholder { color: var(--color-text-muted); } /* ============================================= CYBER THEME (Antigravity-inspired dark blue) ============================================= */ [data-theme="cyber"] { --color-primary: #00d4ff; --color-primary-hover: #38bdf8; --color-primary-light: #0c1929; --color-primary-rgb: 0, 212, 255; --color-bg: #0a0e17; --color-bg-elevated: #111827; --color-surface: #0f1629; --color-surface-alt: #1a2744; --color-border: #1e3a5f; --color-text: #e2e8f0; --color-text-secondary: #8892a6; --color-text-muted: #5a6478; --color-success: #00ff88; --color-success-bg: rgba(0, 255, 136, 0.1); --color-warning: #ffcc00; --color-warning-bg: rgba(255, 204, 0, 0.1); --color-error: #ff4757; --color-error-bg: rgba(255, 71, 87, 0.1); --color-info: #00d4ff; --color-info-bg: rgba(0, 212, 255, 0.1); --shadow-sm: 0 1px 3px rgba(0, 212, 255, 0.1); --shadow-md: 0 4px 10px rgba(0, 212, 255, 0.15); --shadow-lg: 0 10px 30px rgba(0, 212, 255, 0.2); --gradient-primary: linear-gradient(135deg, #00d4ff 0%, #7c3aed 100%); --gradient-success: linear-gradient(135deg, #00ff88 0%, #10b981 100%); --gradient-accent: linear-gradient(135deg, #ffcc00 0%, #ff9500 100%); } /* Cyber theme form inputs - ensure legibility */ [data-theme="cyber"] .form-input, [data-theme="cyber"] .form-textarea, [data-theme="cyber"] .form-select { color: var(--color-text); background-color: var(--color-surface-alt); border-color: var(--color-border); } [data-theme="cyber"] .form-input::placeholder, [data-theme="cyber"] .form-textarea::placeholder { color: var(--color-text-muted); } [data-theme="cyber"] .form-input:focus, [data-theme="cyber"] .form-textarea:focus, [data-theme="cyber"] .form-select:focus { border-color: var(--color-primary); box-shadow: 0 0 10px rgba(0, 212, 255, 0.3); } /* Cyber theme special glow effects */ [data-theme="cyber"] .card, [data-theme="cyber"] .stat-card, [data-theme="cyber"] .auth-card { border: 1px solid rgba(0, 212, 255, 0.2); box-shadow: 0 0 20px rgba(0, 212, 255, 0.05); } [data-theme="cyber"] .btn--primary { background: var(--gradient-primary); border: none; box-shadow: 0 0 20px rgba(0, 212, 255, 0.3); } [data-theme="cyber"] .btn--primary:hover { box-shadow: 0 0 30px rgba(0, 212, 255, 0.5); } [data-theme="cyber"] .logo { background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Mobile: brighter gradient for better visibility */ @media (max-width: 640px) { [data-theme="cyber"] .logo { /* Brighter gradient: cyan to bright violet instead of dark purple */ background: linear-gradient(135deg, #00d4ff 0%, #00f0ff 30%, #a855f7 70%, #c084fc 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: none; } } [data-theme="cyber"] .header { background: rgba(15, 22, 41, 0.95); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(0, 212, 255, 0.1); } /* Cyber theme admin gear - special glow effect */ [data-theme="cyber"] .nav-admin-gear { background: rgba(0, 212, 255, 0.1); border-color: rgba(0, 212, 255, 0.3); color: var(--color-primary); box-shadow: 0 0 8px rgba(0, 212, 255, 0.2), inset 0 0 4px rgba(0, 212, 255, 0.1); } [data-theme="cyber"] .nav-admin-gear:hover { background: rgba(0, 212, 255, 0.2); border-color: var(--color-primary); box-shadow: 0 0 20px rgba(0, 212, 255, 0.4), 0 0 40px rgba(0, 212, 255, 0.2), inset 0 0 8px rgba(0, 212, 255, 0.2); color: #00d4ff; } /* Cyber nav links glow on hover */ [data-theme="cyber"] .nav-link:hover { background: rgba(0, 212, 255, 0.1); color: var(--color-primary); } /* ============================================= THEME SWITCHER COMPONENT ============================================= */ .theme-switcher { display: flex; align-items: center; gap: 0.5rem; } .theme-btn { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--color-border); cursor: pointer; transition: all 0.2s; position: relative; overflow: hidden; } .theme-btn:hover { transform: scale(1.1); border-color: var(--color-primary); } .theme-btn.active { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.3); } .theme-btn--light { background: linear-gradient(135deg, #f8fafc 50%, #e2e8f0 50%); } .theme-btn--dark { background: linear-gradient(135deg, #2d2d2d 50%, #121212 50%); } .theme-btn--cyber { background: linear-gradient(135deg, #00d4ff 0%, #0a0e17 50%, #7c3aed 100%); } /* ============================================= TRANSITIONS FOR THEME CHANGES ============================================= */ body, .header, .card, .btn, .nav-link, .form-input, .table { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }