/* ============================================ DARK THEME ============================================ Dark mode color overrides. Apply by adding [data-theme="dark"] to element. Usage: JavaScript toggle: document.documentElement.setAttribute('data-theme', 'dark'); document.documentElement.removeAttribute('data-theme'); CSS Audit (Feb 2026): INACTIVE — dark mode is disabled site-wide. dark-mode.js forces light mode in init() and never creates a toggle button. [data-theme="dark"] is never set on . All selectors in this file are gated behind [data-theme="dark"] and therefore never apply. Kept for potential future re-enablement. ============================================ */ [data-theme="dark"] { /* ============================================ BACKGROUND COLORS ============================================ */ --ds-color-bg-primary: var(--ds-color-text-primary); --ds-color-bg-secondary: var(--ds-color-bg-secondary); --ds-color-bg-tertiary: var(--ds-color-text-primary); --ds-color-surface: var(--ds-color-text-primary); --ds-color-surface-hover: var(--ds-color-text-primary); --ds-color-surface-translucent: rgba(24, 24, 24, 0.95); /* ============================================ TEXT COLORS ============================================ */ --ds-color-text-primary: var(--ds-color-bg-secondary); --ds-color-text-secondary: var(--ds-color-text-tertiary); --ds-color-text-tertiary: var(--ds-color-text-tertiary); --ds-color-text-inverse: var(--ds-color-text-primary); /* ============================================ BORDER COLORS ============================================ */ --ds-border-color: var(--ds-border-color); --ds-border-color-light: var(--ds-color-text-primary); /* ============================================ SEMANTIC COLORS (adjusted for dark mode) ============================================ */ --ds-color-success-bg: rgba(76, 175, 80, 0.15); --ds-color-warning-bg: rgba(255, 152, 0, 0.15); --ds-color-error-bg: rgba(239, 68, 68, 0.15); --ds-color-info-bg: rgba(33, 150, 243, 0.15); /* Semantic light variants for badges/alerts */ --ds-color-success-light: rgba(76, 175, 80, 0.2); --ds-color-warning-light: rgba(255, 152, 0, 0.2); --ds-color-error-light: rgba(239, 68, 68, 0.2); --ds-color-info-light: rgba(33, 150, 243, 0.2); /* ============================================ SHADOWS (adjusted for dark mode) ============================================ */ --ds-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2); --ds-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.2), 0 8px 16px rgba(0, 0, 0, 0.2); --ds-shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.2), 0 8px 16px rgba(0, 0, 0, 0.2), 0 16px 32px rgba(0, 0, 0, 0.25); --ds-shadow-xl: 0 4px 8px rgba(0, 0, 0, 0.2), 0 8px 16px rgba(0, 0, 0, 0.25), 0 16px 32px rgba(0, 0, 0, 0.3), 0 32px 64px rgba(0, 0, 0, 0.35); --ds-shadow-glow: 0 0 20px rgba(99, 102, 241, 0.3); /* ============================================ GRADIENTS (adjusted for dark mode) ============================================ */ --ds-gradient-subtle: linear-gradient(180deg, var(--ds-color-bg-secondary) 0%, var(--ds-color-text-primary) 100%); --ds-gradient-dark: linear-gradient(180deg, var(--ds-color-text-primary) 0%, var(--ds-color-bg-secondary) 100%); --ds-gradient-skeleton: linear-gradient( 90deg, var(--ds-color-text-primary) 0%, var(--ds-color-text-primary) 50%, var(--ds-color-text-primary) 100% ); } /* ============================================ DARK MODE SPECIFIC OVERRIDES ============================================ */ [data-theme="dark"] body::before { /* Adjust grain texture opacity for dark mode */ opacity: 0.03; } /* Card border gradient adjustment for dark mode */ [data-theme="dark"] .card::before, [data-theme="dark"] .theme-card::before { background: linear-gradient(145deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.02) 100%); } /* Form focus states with darker glow */ [data-theme="dark"] .form-control:focus, [data-theme="dark"] .ui-input:focus, [data-theme="dark"] .form-select:focus { box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2); } /* Scrollbar for dark mode */ [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--ds-color-bg-secondary); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--ds-color-text-primary); } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--ds-color-text-secondary); } /* Glass effect for dark mode */ [data-theme="dark"] .glass { background: rgba(24, 24, 24, 0.85) !important; border: 1px solid rgba(255, 255, 255, 0.1); } /* Close button for dark mode */ [data-theme="dark"] .btn-close { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f5f5f5'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3C/svg%3e"); } /* Loading overlay for dark mode */ [data-theme="dark"] .loading-overlay { background: rgba(10, 10, 10, 0.9); } /* ============================================ PREFERS COLOR SCHEME (Auto dark mode) ============================================ DISABLED: Auto dark mode has been disabled. Dark mode is now opt-in only via data-theme="dark". To re-enable auto dark mode, uncomment the section below. ============================================ */ /* @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ds-color-bg-primary: var(--ds-color-text-primary); --ds-color-bg-secondary: var(--ds-color-bg-secondary); --ds-color-bg-tertiary: var(--ds-color-text-primary); --ds-color-surface: var(--ds-color-text-primary); --ds-color-surface-hover: var(--ds-color-text-primary); --ds-color-text-primary: var(--ds-color-bg-secondary); --ds-color-text-secondary: var(--ds-color-text-tertiary); --ds-color-text-tertiary: var(--ds-color-text-tertiary); --ds-color-text-inverse: var(--ds-color-text-primary); --ds-border-color: var(--ds-border-color); --ds-border-color-light: var(--ds-color-text-primary); --ds-color-success-bg: rgba(76, 175, 80, 0.15); --ds-color-warning-bg: rgba(255, 152, 0, 0.15); --ds-color-error-bg: rgba(239, 68, 68, 0.15); --ds-color-info-bg: rgba(33, 150, 243, 0.15); } } */ /* ============================================ THEME TOGGLE HELPER CLASSES ============================================ */ /* Hide in dark mode */ .dark-hidden, [data-theme="dark"] .light-only { display: none !important; } /* Hide in light mode */ .light-hidden, :not([data-theme="dark"]) .dark-only { display: none !important; } /* Show only in dark mode */ [data-theme="dark"] .dark-only { display: initial !important; }