/* ═══════════════════════════════════════════════════════════════════════════ Dark theme — redefines semantic tokens only. Activates via attribute OR system preference (attribute wins). Contrast targets (WCAG AA): fg on bg/surface ≥ 4.5:1 muted on bg/surface ≥ 4.5:1 border on bg ≥ 3:1 Usage: — explicit (or just import this file and let prefers-color-scheme handle it) ═══════════════════════════════════════════════════════════════════════════ */ [data-theme='dark'] { --c42-color-bg: var(--c42-gray-900); --c42-color-surface: var(--c42-gray-800); --c42-color-fg: var(--c42-gray-50); --c42-color-muted: var(--c42-gray-400); --c42-color-border: var(--c42-gray-600); --c42-color-accent: var(--c42-primary-400); --c42-color-accent-strong: var(--c42-primary-500); --c42-color-on-accent: var(--c42-gray-900); --c42-color-danger: var(--c42-danger-400); --c42-color-on-danger: var(--c42-gray-900); --c42-color-success: var(--c42-success-400); --c42-color-warning: var(--c42-warning-400); --c42-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); background-color: var(--c42-color-bg); color: var(--c42-color-fg); } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --c42-color-bg: var(--c42-gray-900); --c42-color-surface: var(--c42-gray-800); --c42-color-fg: var(--c42-gray-50); --c42-color-muted: var(--c42-gray-400); --c42-color-border: var(--c42-gray-600); --c42-color-accent: var(--c42-primary-400); --c42-color-accent-strong: var(--c42-primary-500); --c42-color-on-accent: var(--c42-gray-900); --c42-color-danger: var(--c42-danger-400); --c42-color-on-danger: var(--c42-gray-900); --c42-color-success: var(--c42-success-400); --c42-color-warning: var(--c42-warning-400); --c42-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); background-color: var(--c42-color-bg); color: var(--c42-color-fg); } }