/* Dark mode overrides — applied when */
:root {
--tokens-loaded: 1;
}
[data-theme="dark"] {
color-scheme: dark;
--c-surface: #0f172a;
--c-surface-soft: #1e293b;
--c-surface-elevated: #1e293b;
--c-bg: #020617;
--c-text: #f1f5f9;
--c-text-muted: #94a3b8;
--c-text-soft: #cbd5e1;
--c-border: #334155;
--c-border-soft: #1e293b;
--c-primary: #818cf8;
--c-primary-text: #c7d2fe;
--c-primary-soft: #312e81;
--c-success: #4ade80;
--c-success-text: #86efac;
--c-success-soft: #14532d;
--c-warning: #fbbf24;
--c-danger: #f87171;
--c-danger-text: #fca5a5;
--c-danger-soft: #7f1d1d;
}
[data-theme="dark"] body {
background: #020617;
color: #f1f5f9;
}
[data-theme="dark"] .app-shell,
[data-theme="dark"] .container,
[data-theme="dark"] main {
background: transparent;
}
[data-theme="dark"] .card,
[data-theme="dark"] .briefing,
[data-theme="dark"] .recommend-widget,
[data-theme="dark"] .kpi-card,
[data-theme="dark"] .streak-widget,
[data-theme="dark"] .today-strip,
[data-theme="dark"] .ar-table,
[data-theme="dark"] .ca-table,
[data-theme="dark"] .lf-table,
[data-theme="dark"] .outbox-table,
[data-theme="dark"] .qa-card,
[data-theme="dark"] .ar-table thead th,
[data-theme="dark"] .ca-table thead th,
[data-theme="dark"] .lf-table thead th,
[data-theme="dark"] .outbox-table thead th,
[data-theme="dark"] .empty-state {
background: #1e293b !important;
color: #f1f5f9 !important;
border-color: #334155 !important;
}
[data-theme="dark"] .ar-table th,
[data-theme="dark"] .ca-table th,
[data-theme="dark"] .lf-table th,
[data-theme="dark"] .outbox-table th {
background: #0f172a !important;
}
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
background: #1e293b;
color: #f1f5f9;
border-color: #334155;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
color: #64748b;
}
[data-theme="dark"] .app-header,
[data-theme="dark"] .sidebar,
[data-theme="dark"] .lesson-rail {
background: rgba(15, 23, 42, 0.95) !important;
border-color: #334155 !important;
backdrop-filter: blur(10px);
}
[data-theme="dark"] .sidebar-link {
color: #cbd5e1;
}
[data-theme="dark"] .sidebar-link:hover,
[data-theme="dark"] .sidebar-link.active {
background: #1e293b;
color: #fff;
}
[data-theme="dark"] a {
color: #c7d2fe;
}
[data-theme="dark"] a:hover {
color: #e0e7ff;
}
[data-theme="dark"] .page-title,
[data-theme="dark"] h1, [data-theme="dark"] h2,
[data-theme="dark"] h3, [data-theme="dark"] h4 {
color: #f1f5f9;
}
[data-theme="dark"] .page-sub,
[data-theme="dark"] .page-eyebrow,
[data-theme="dark"] .subtitle {
color: #94a3b8;
}
[data-theme="dark"] .notif-bell {
background: #1e293b;
border-color: #334155;
color: #cbd5e1;
}
[data-theme="dark"] .notif-bell:hover { color: #fff; border-color: #475569; }
[data-theme="dark"] .spotlight-trigger,
[data-theme="dark"] #spotlight-fab,
[data-theme="dark"] .bookmark-fab,
[data-theme="dark"] .note-fab,
[data-theme="dark"] .qa-fab {
/* Keep FAB primary colors */
}
[data-theme="dark"] .spotlight-panel,
[data-theme="dark"] .notif-panel,
[data-theme="dark"] .bookmark-drawer,
[data-theme="dark"] .note-drawer,
[data-theme="dark"] .qa-drawer {
background: #1e293b !important;
color: #f1f5f9 !important;
border-color: #334155 !important;
}
[data-theme="dark"] .spotlight-input-row input {
color: #f1f5f9;
}
[data-theme="dark"] .spotlight-item.is-active,
[data-theme="dark"] .spotlight-item:hover {
background: #0f172a;
}
[data-theme="dark"] .preview-lesson {
background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
border-color: #334155;
}
[data-theme="dark"] .preview-lesson-fade {
background: linear-gradient(to bottom, transparent, #0f172a);
}
[data-theme="dark"] code {
background: #334155;
color: #fbbf24;
}
/* Theme toggle button itself */
.theme-toggle {
position: fixed;
top: 16px;
right: 132px;
z-index: 55;
width: 44px; height: 44px;
border-radius: 22px;
background: #fff;
border: 1px solid #e2e8f0;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
color: #64748b;
box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.08);
transition: all 150ms;
}
.theme-toggle:hover { color: #0f172a; border-color: #cbd5e1; }
[data-theme="dark"] .theme-toggle {
background: #1e293b;
border-color: #334155;
color: #cbd5e1;
}
[data-theme="dark"] .theme-toggle:hover { color: #fff; border-color: #475569; }
.theme-toggle-sun { display: none; }
.theme-toggle-moon { display: block; }
[data-theme="dark"] .theme-toggle-sun { display: block; }
[data-theme="dark"] .theme-toggle-moon { display: none; }
@media (max-width: 540px) {
.theme-toggle { top: 12px; right: 116px; width: 40px; height: 40px; }
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
}
}