/** * theme.css — ResultVala Theme System v3 (Full Coverage) * Three modes: System (follows OS), Light, Dark (default) * Controlled by: data-theme="dark" | "light" on * System mode removes data-theme entirely and relies on prefers-color-scheme. * * Requirements: * - Left Sidebar stays PERMANENTLY DARK (#161618) in all modes. * - High contrast text in Light mode for perfect accessibility. * - Orange branding (#ff6b1a) preserved across all themes. * - All hardcoded page-level styles overridden via [data-theme="light"] selectors. */ /* ── Smooth Theme Transitions ─────────────────────────────────────────────── */ *, *::before, *::after { transition: background-color 0.25s ease, border-color 0.25s ease, color 0.2s ease, box-shadow 0.2s ease !important; } .no-theme-transition, .no-theme-transition * { transition: none !important; } /* ── GLOBAL TYPOGRAPHY & FONT SYSTEM ──────────────────────────────────────── */ body, button, input, select, textarea, optgroup, .btn, .form-control, .form-select, .table, .modal-content { font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; } /* ── DARK MODE (default) ─────────────────────────────────────────────────── */ :root, html[data-theme="dark"] { --primary: #ff6b1a; --primary-hover: #ff8033; --primary-glow: rgba(255, 107, 26, 0.25); --accent: #ff6b1a; --bg: #090a0f; --bg-soft: #10111a; --panel: #14151f; --panel-hover: #1b1c2a; --panel-2: #191a26; --line: rgba(255,255,255,.09); --line-hover: rgba(255,255,255,.16); --orange: #ff6b1a; --orange-glow: rgba(255,107,26,.35); --text: #f8fafc; --text-primary: #f8fafc; --text-secondary: #94a3b8; --muted: #8a8a98; --muted-2: #64748b; --success: #10b981; --warning: #f59e0b; --danger: #ef4444; --info: #3b82f6; /* Permanent Dark Sidebar */ --sidebar-bg: #161618; --sidebar-text: #a4a4aa; --sidebar-active-bg: #ff6b1a; --sidebar-active-text: #ffffff; --navbar-bg: rgba(16,16,18,.94); --table-head-bg: #181924; --table-stripe: rgba(255,255,255,.02); --table-hover: rgba(255,107,26,.05); --input-bg: #181924; --input-border: rgba(255,255,255,.12); --input-text: #f8fafc; --label-color: #cbd5e1; --section-head-color: #ffffff; --card-bg: #14151f; --skeleton-base: rgba(255,255,255,.06); --skeleton-shine: rgba(255,255,255,.1); color-scheme: dark; } /* ── LIGHT MODE ─────────────────────────────────────────────────────────── */ html[data-theme="light"] { --bg: #f1f5f9; --bg-soft: #e8edf5; --panel: #ffffff; --panel-hover: #f8fafc; --panel-2: #f8fafc; --line: #e2e8f0; --line-hover: #cbd5e1; --orange: #ff6b1a; --orange-glow: rgba(255,107,26,.2); --accent: #ff6b1a; --text: #0f172a; --muted: #475569; --muted-2: #64748b; --success: #059669; --warning: #d97706; --danger: #dc2626; --info: #2563eb; /* KEEP SIDEBAR PERMANENTLY DARK */ --sidebar-bg: #161618; --sidebar-text: #a4a4aa; --sidebar-active-bg: #ff6b1a; --sidebar-active-text: #ffffff; --navbar-bg: rgba(255,255,255,.97); --table-head-bg: #f1f5f9; --table-stripe: #f8fafc; --table-hover: rgba(255,107,26,.05); --input-bg: #ffffff; --input-border: #cbd5e1; --input-text: #0f172a; --label-color: #374151; --section-head-color: #0f172a; --card-bg: #ffffff; --skeleton-base: rgba(0,0,0,.06); --skeleton-shine: rgba(0,0,0,.03); color-scheme: light; } /* ── SYSTEM MODE (Light OS preference) ────────────────────────────────────── */ @media (prefers-color-scheme: light) { html:not([data-theme]) { --bg: #f1f5f9; --bg-soft: #e8edf5; --panel: #ffffff; --panel-hover: #f8fafc; --panel-2: #f8fafc; --line: #e2e8f0; --line-hover: #cbd5e1; --orange: #ff6b1a; --orange-glow: rgba(255,107,26,.2); --accent: #ff6b1a; --text: #0f172a; --muted: #475569; --muted-2: #64748b; --success: #059669; --warning: #d97706; --danger: #dc2626; --info: #2563eb; --sidebar-bg: #161618; --sidebar-text: #a4a4aa; --sidebar-active-bg: #ff6b1a; --sidebar-active-text: #ffffff; --navbar-bg: rgba(255,255,255,.97); --table-head-bg: #f1f5f9; --table-stripe: #f8fafc; --table-hover: rgba(255,107,26,.05); --input-bg: #ffffff; --input-border: #cbd5e1; --input-text: #0f172a; --label-color: #374151; --section-head-color: #0f172a; --card-bg: #ffffff; --skeleton-base: rgba(0,0,0,.06); --skeleton-shine: rgba(0,0,0,.03); color-scheme: light; } } /* ═══════════════════════════════════════════════════════════════ LIGHT MODE — FULL COMPONENT OVERRIDES These selectors target every hardcoded dark value found in page-level