/* ============================================================================ darkmode.css — Opt-in dark theme for the design system (IAPrompt #33). Activated by adding data-theme="dark" to or (e.g. via a toggle). Only remaps the --wa-* tokens, so nothing changes until a page opts in AND uses the wa- components. No effect on the existing light UI by default. ============================================================================ */ [data-theme="dark"] { --wa-text: #e5e7eb; --wa-text-muted: #9ca3af; --wa-text-faint: #6b7280; --wa-border: #374151; --wa-border-soft: #1f2937; --wa-bg: #0b1220; --wa-surface: #111827; --wa-surface-alt: #1f2937; --wa-blue-soft: #1e293b; --wa-green-soft: #14321f; --wa-amber-soft: #3a2c10; --wa-red-soft: #3a1414; } [data-theme="dark"] .wa-card, [data-theme="dark"] .wa-kpi, [data-theme="dark"] .wa-table tbody tr:hover { background: var(--wa-surface); } [data-theme="dark"] .wa-job-body { background: var(--wa-surface); }