To enable sitewide via PHP, see ui-redesign-spec.md §5. ================================================================ */ :root[data-theme="modern"], [data-theme="modern"] { /* Backgrounds — clearly slate, cards stay white for contrast */ --color-bg: #f1f5f9; --color-bg-subtle: #e2e8f0; --color-bg-muted: #cbd5e1; --color-surface: #ffffff; /* Borders — stronger definition on slate base */ --color-border: #cbd5e1; --color-border-strong: #94a3b8; --color-border-input: #767676; /* ~4.5:1 on white — AA; form input boundaries (SC 1.4.11) */ /* Text — slightly warmer dark */ --color-text: #111827; --color-text-muted: #6b7280; --color-text-subtle: #9ca3af; --color-text-inverse: #ffffff; /* Accent — indigo (vs blue in light theme) */ --color-accent: #4f46e5; /* 5.5:1 on white — AA */ --color-accent-hover: #4338ca; --color-accent-active: #3730a3; --color-accent-subtle: #eef2ff; --color-accent-text: #4338ca; /* Semantic */ --color-success: #15803d; /* ~5.0:1 on white surface — AA */ --color-success-subtle: #f0fdf4; --color-warning: #d97706; /* background use only (yellow button, dark text) */ --color-warning-text: #b45309; /* ~5.0:1 on white surface — AA; warning text (SC 1.4.3) */ --color-warning-subtle: #fffbeb; --color-danger: #dc2626; --color-danger-subtle: #fef2f2; /* Focus ring matched to indigo */ --shadow-focus: 0 0 0 3px rgba(79, 70, 229, 0.25); /* Slightly elevated shadow for surfaces on grey bg */ --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.09), 0 1px 3px rgba(0, 0, 0, 0.05); }