/* ===================================================== Dark Mode — variable overrides only. Activated by adding [data-theme="dark"] to . ===================================================== */ :root { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; --color-text-primary: #E6EDF3; --color-text-secondary: #B6C2CD; --color-text-tertiary: #8B98A5; --color-text-muted: #6B7785; --color-text-inverse: #0B0F14; --color-bg-page: #0B0F14; --color-bg-surface: #131A22; --color-bg-subtle: #0F151B; --color-bg-primary: #131A22; --color-bg-secondary: #0F151B; --color-bg-muted: #1A2330; --color-bg-hover: #1E2935; --color-bg-active: #243140; --color-bg-section: #131A22; --color-gray-50: #1A2330; --color-gray-100: #1E2935; --color-gray-200: #2A3744; --color-gray-300: #3A4856; --color-gray-400: #5A6878; --color-gray-500: #8B98A5; --color-gray-600: #B6C2CD; --color-gray-700: #D1D9E0; --color-gray-800: #E6EDF3; --color-gray-900: #F0F4F8; --color-border-default: #2A3744; --color-border: #2A3744; --color-border-light: #1E2935; --color-border-strong: #3A4856; --color-primary-50: #0E2A26; --color-primary-100: #133831; --color-primary-200: #1A4D43; --coda-primary-soft: #133831; --coda-mint: #0E2A26; --coda-aqua-light: #0E2A26; --color-success-50: #0E2620; --color-success-100: #133E30; --color-warning-50: #2A1F0A; --color-warning-100: #3A2C10; --color-danger-50: #2A1414; --color-danger-100: #3A1A1A; --color-info-50: #0F2030; --color-info-100: #14304A; --color-purple-50: #1F1631; --color-purple-100: #2D2148; --color-orange-50: #2A1B0E; --color-orange-100: #3A2614; --color-private-soft: #2A2210; --color-private-warm: #3A2E14; --color-private-border: #5A4520; --color-memo-soft: #1F1631; --color-incoming-soft: #0E2620; --color-outgoing-soft: #0F2030; --color-admin-soft: #1A2330; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.40); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45); --shadow-lg: 0 10px 20px -3px rgba(0, 0, 0, 0.50), 0 4px 8px -4px rgba(0, 0, 0, 0.40); --shadow-xl: 0 20px 30px -5px rgba(0, 0, 0, 0.60), 0 8px 12px -6px rgba(0, 0, 0, 0.45); --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25); --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.50), 0 0 0 1px rgba(21, 183, 158, 0.30); --shadow-header: 0 1px 3px rgba(0, 0, 0, 0.40); --shadow-sidebar: 2px 0 12px rgba(0, 0, 0, 0.35); --shadow-modal: 0 25px 50px rgba(0, 0, 0, 0.60), 0 0 0 1px rgba(255, 255, 255, 0.06); --shadow-focus: 0 0 0 4px rgba(21, 183, 158, 0.25); } html[data-theme="dark"] body { background: var(--color-bg-page); color: var(--color-text-primary); } html[data-theme="dark"] img.logo, html[data-theme="dark"] .header-brand img { filter: brightness(1.15); } html[data-theme="dark"] .corr-list-card, html[data-theme="dark"] .gov-card, html[data-theme="dark"] .coda-card, html[data-theme="dark"] .stat-card { background: var(--color-bg-surface); border-color: var(--color-border); } html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select, html[data-theme="dark"] .filter-input, html[data-theme="dark"] .search-input { background: var(--color-bg-muted); color: var(--color-text-primary); border-color: var(--color-border); } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--color-text-muted); } html[data-theme="dark"] .gov-table, html[data-theme="dark"] table { background: var(--color-bg-surface); color: var(--color-text-primary); } html[data-theme="dark"] .gov-table thead, html[data-theme="dark"] table thead { background: var(--color-bg-muted); } html[data-theme="dark"] tbody tr:hover { background: var(--color-bg-hover); } html[data-theme="dark"] .side-bar, html[data-theme="dark"] .title-bar, html[data-theme="dark"] .header { background: var(--color-bg-surface); border-color: var(--color-border); } html[data-theme="dark"] .sidebar-link, html[data-theme="dark"] .sidebar-extra-link { color: var(--color-text-secondary); } html[data-theme="dark"] .sidebar-link:hover, html[data-theme="dark"] .sidebar-link.active { background: var(--color-bg-hover); color: var(--color-primary-300); } html[data-theme="dark"] .modal, html[data-theme="dark"] .modal-content, html[data-theme="dark"] .dropdown, html[data-theme="dark"] .notification-dropdown, html[data-theme="dark"] .profile-dropdown { background: var(--color-bg-surface); color: var(--color-text-primary); border-color: var(--color-border); } html[data-theme="dark"] .dropdown-item:hover { background: var(--color-bg-hover); } html[data-theme="dark"] .timeline-content, html[data-theme="dark"] .audit-row, html[data-theme="dark"] .notif-item { background: var(--color-bg-surface); border-color: var(--color-border); }