/* ================================================================ Theme System — CSS Custom Properties for Light & Dark Mode ================================================================ Usage: All components should reference var(--xxx) instead of hardcoded Tailwind color classes where feasible. The [data-theme="dark"] selector is toggled on by ThemeManager (js/theme.js). ================================================================ */ /* ── Light Theme (default) ──────────────────────────────────────── */ :root { /* Backgrounds */ --bg-primary: #ffffff; --bg-secondary: #f9fafb; --bg-tertiary: #f3f4f6; --bg-elevated: #ffffff; /* Text */ --text-primary: #111827; --text-secondary: #6b7280; --text-tertiary: #9ca3af; --text-inverse: #ffffff; /* Borders */ --border-primary: #e5e7eb; --border-secondary: #d1d5db; /* Sidebar */ --sidebar-bg: #1e293b; --sidebar-text: #f8fafc; --sidebar-text-muted: #94a3b8; --sidebar-hover: #334155; --sidebar-active: #334155; --sidebar-border: #334155; /* Header */ --header-bg: #ffffff; --header-border: #e5e7eb; --header-text: #1f2937; /* Cards */ --card-bg: #ffffff; --card-border: #e5e7eb; --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06); /* Inputs */ --input-bg: #ffffff; --input-border: #d1d5db; --input-text: #111827; --input-placeholder: #9ca3af; --input-focus-ring: #6366f1; /* Brand / Action Colors */ --primary: #6366f1; --primary-hover: #4f46e5; --primary-light: #eef2ff; --success: #10b981; --success-light: #ecfdf5; --warning: #f59e0b; --warning-light: #fffbeb; --error: #ef4444; --error-light: #fef2f2; --info: #3b82f6; --info-light: #eff6ff; /* Tables */ --table-header-bg: #f9fafb; --table-row-hover: #f9fafb; --table-border: #e5e7eb; /* Code blocks */ --code-bg: #f3f4f6; --code-text: #1f2937; --code-border: #e5e7eb; /* Skeleton / Loading */ --skeleton-base: #f0f0f0; --skeleton-shine: #e0e0e0; /* Overlay */ --overlay-bg: rgba(0, 0, 0, 0.5); /* Scrollbar */ --scrollbar-track: #f3f4f6; --scrollbar-thumb: #d1d5db; } /* ── Dark Theme ─────────────────────────────────────────────────── */ [data-theme="dark"] { /* Backgrounds */ --bg-primary: #0f172a; --bg-secondary: #1e293b; --bg-tertiary: #334155; --bg-elevated: #1e293b; /* Text */ --text-primary: #f8fafc; --text-secondary: #94a3b8; --text-tertiary: #64748b; --text-inverse: #0f172a; /* Borders */ --border-primary: #334155; --border-secondary: #475569; /* Sidebar */ --sidebar-bg: #020617; --sidebar-text: #f8fafc; --sidebar-text-muted: #64748b; --sidebar-hover: #1e293b; --sidebar-active: #1e293b; --sidebar-border: #1e293b; /* Header */ --header-bg: #1e293b; --header-border: #334155; --header-text: #f8fafc; /* Cards */ --card-bg: #1e293b; --card-border: #334155; --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2); /* Inputs */ --input-bg: #1e293b; --input-border: #475569; --input-text: #f8fafc; --input-placeholder: #64748b; --input-focus-ring: #818cf8; /* Brand / Action Colors (slightly adjusted for dark bg) */ --primary: #818cf8; --primary-hover: #6366f1; --primary-light: rgba(99, 102, 241, 0.15); --success: #34d399; --success-light: rgba(16, 185, 129, 0.15); --warning: #fbbf24; --warning-light: rgba(245, 158, 11, 0.15); --error: #f87171; --error-light: rgba(239, 68, 68, 0.15); --info: #60a5fa; --info-light: rgba(59, 130, 246, 0.15); /* Tables */ --table-header-bg: #1e293b; --table-row-hover: #334155; --table-border: #334155; /* Code blocks */ --code-bg: #1e293b; --code-text: #e2e8f0; --code-border: #334155; /* Skeleton / Loading */ --skeleton-base: #1e293b; --skeleton-shine: #334155; /* Overlay */ --overlay-bg: rgba(0, 0, 0, 0.7); /* Scrollbar */ --scrollbar-track: #1e293b; --scrollbar-thumb: #475569; } /* ── Accessibility ─────────────────────────────────────────────── */ /* Skip navigation link (WCAG 2.4.1 Bypass Blocks) */ .skip-nav { position: absolute; top: -100%; left: 16px; z-index: 9999; padding: 8px 16px; background: var(--primary); color: #fff; border-radius: 0 0 8px 8px; font-weight: 600; text-decoration: none; transition: top 0.2s ease; } .skip-nav:focus { top: 0; outline: 3px solid var(--primary); outline-offset: 2px; } /* Screen-reader only utility */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Keyboard focus-visible styling (WCAG 2.4.7) */ :focus-visible { outline: 3px solid var(--input-focus-ring); outline-offset: 2px; } :focus:not(:focus-visible) { outline: none; } /* Reduced motion for vestibular-sensitive users (WCAG 2.3.3) */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } html { scroll-behavior: auto; } } /* ── Theme-aware utility classes ────────────────────────────────── */ /* Body background */ body { background-color: var(--bg-secondary); color: var(--text-primary); transition: background-color 0.2s ease, color 0.2s ease; } /* Smooth transitions for theme switching */ *, *::before, *::after { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.15s ease, box-shadow 0.2s ease; } /* Prevent transition on page load (ThemeManager adds this class briefly) */ .theme-transition-none *, .theme-transition-none *::before, .theme-transition-none *::after { transition: none !important; } /* Theme-aware background classes */ .theme-bg-primary { background-color: var(--bg-primary) !important; } .theme-bg-secondary { background-color: var(--bg-secondary) !important; } .theme-bg-tertiary { background-color: var(--bg-tertiary) !important; } .theme-bg-elevated { background-color: var(--bg-elevated) !important; } .theme-bg-card { background-color: var(--card-bg) !important; } .theme-bg-sidebar { background-color: var(--sidebar-bg) !important; } .theme-bg-header { background-color: var(--header-bg) !important; } .theme-bg-input { background-color: var(--input-bg) !important; } /* Theme-aware text classes */ .theme-text-primary { color: var(--text-primary) !important; } .theme-text-secondary { color: var(--text-secondary) !important; } .theme-text-tertiary { color: var(--text-tertiary) !important; } /* Theme-aware border classes */ .theme-border { border-color: var(--border-primary) !important; } .theme-border-secondary { border-color: var(--border-secondary) !important; } /* Theme-aware card */ .theme-card { background-color: var(--card-bg); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); } /* Theme-aware header */ .theme-header { background-color: var(--header-bg); border-bottom: 1px solid var(--header-border); color: var(--header-text); } /* Theme-aware sidebar */ .theme-sidebar { background-color: var(--sidebar-bg); color: var(--sidebar-text); } /* Theme-aware input */ .theme-input { background-color: var(--input-bg); border-color: var(--input-border); color: var(--input-text); } .theme-input::placeholder { color: var(--input-placeholder); } .theme-input:focus { border-color: var(--input-focus-ring); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15); } /* Theme-aware table */ .theme-table th { background-color: var(--table-header-bg); color: var(--text-secondary); border-color: var(--table-border); } .theme-table td { border-color: var(--table-border); color: var(--text-primary); } .theme-table tr:hover td { background-color: var(--table-row-hover); } /* Theme-aware code block */ .theme-code { background-color: var(--code-bg); color: var(--code-text); border: 1px solid var(--code-border); } /* Theme-aware skeleton animation */ [data-theme="dark"] .skeleton { background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-shine) 50%, var(--skeleton-base) 75%); background-size: 200% 100%; } /* Theme-aware scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--scrollbar-track); } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); } /* Mobile card-on-mobile dark mode override */ [data-theme="dark"] .card-on-mobile { background: var(--card-bg); box-shadow: var(--card-shadow); } /* Dark mode responsive table border override */ [data-theme="dark"] .responsive-table tr { border-color: var(--border-primary); } /* ── Global Dark-mode Tailwind Class Overrides ──────────────────── */ /* These catch hardcoded Tailwind classes in pages not yet refactored to use CSS variables, ensuring readable dark-mode everywhere. */ /* Backgrounds */ [data-theme="dark"] .bg-white { background-color: var(--card-bg) !important; } [data-theme="dark"] .bg-gray-50 { background-color: var(--bg-secondary) !important; } [data-theme="dark"] .bg-gray-100 { background-color: var(--bg-tertiary) !important; } /* Text */ [data-theme="dark"] .text-gray-900 { color: var(--text-primary) !important; } [data-theme="dark"] .text-gray-800 { color: var(--text-primary) !important; } [data-theme="dark"] .text-gray-700 { color: var(--text-secondary) !important; } [data-theme="dark"] .text-gray-600 { color: var(--text-secondary) !important; } [data-theme="dark"] .text-gray-500 { color: var(--text-tertiary) !important; } [data-theme="dark"] .text-gray-400 { color: var(--text-tertiary) !important; } [data-theme="dark"] .text-gray-300 { color: var(--text-tertiary) !important; } /* Borders */ [data-theme="dark"] .border-gray-200 { border-color: var(--border-primary) !important; } [data-theme="dark"] .border-gray-300 { border-color: var(--border-secondary) !important; } [data-theme="dark"] .border-gray-100 { border-color: var(--border-primary) !important; } [data-theme="dark"] .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border-primary) !important; } [data-theme="dark"] .divide-gray-300 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border-secondary) !important; } [data-theme="dark"] .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border-primary) !important; } /* Rings & Shadows */ [data-theme="dark"] .ring-black { --tw-ring-color: rgba(255, 255, 255, 0.1) !important; } [data-theme="dark"] .shadow-sm { box-shadow: var(--card-shadow) !important; } [data-theme="dark"] .shadow { box-shadow: var(--card-shadow) !important; } /* Hover states */ [data-theme="dark"] .hover\:bg-gray-50:hover { background-color: var(--bg-tertiary) !important; } [data-theme="dark"] .hover\:bg-gray-100:hover { background-color: var(--bg-tertiary) !important; } /* Form elements (inputs, selects, textareas) */ [data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]), [data-theme="dark"] select, [data-theme="dark"] textarea { background-color: var(--input-bg); border-color: var(--input-border); color: var(--input-text); } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--input-placeholder); } [data-theme="dark"] input:focus, [data-theme="dark"] select:focus, [data-theme="dark"] textarea:focus { border-color: var(--input-focus-ring); } /* Gradient overlays — keep visible on dark backgrounds */ [data-theme="dark"] .bg-gradient-to-br.from-blue-50.to-indigo-100 { background: var(--bg-secondary) !important; } /* Placeholder text color */ [data-theme="dark"] .placeholder-gray-400::placeholder { color: var(--input-placeholder) !important; } /* bg-opacity on dark — prevent whitewash */ [data-theme="dark"] .bg-opacity-75 { --tw-bg-opacity: 0.85; } /* Code / pre blocks */ [data-theme="dark"] pre { background-color: var(--code-bg); color: var(--code-text); } /* ── Sidebar Collapse / Transition ─────────────────────────────── */ #sidebar { transition: width 0.3s ease, transform 0.3s ease; } /* border-l-3 utility (not in Tailwind) */ .border-l-3 { border-left-width: 3px; }