/* ════════════════════════════════════════════════════════════════════ PF DESIGN SYSTEM — Dark Theme ──────────────────────────────────────────────────────────────────── Themes are PURE TOKEN OVERRIDES. This file: ✓ Re-declares semantic color tokens with dark-mode primitives ✓ Adjusts shadow tokens for dark surface contrast ✗ NEVER targets components (no .pf-card, .pf-button, etc.) ✗ NEVER adds new tokens (only overrides existing ones) ✗ NEVER references primitives by hex value (use --pf-color-*-N) Selector: [data-pf-theme="dark"] applied to or . Backwards-compat: also targets [data-cms-editor-theme="dark"] which is the legacy attribute used by the CMS editor toggle. Design principles for dark themes (Material Design 3 + Apple HIG): • Surfaces use slate-900 → slate-700 (not pure black) to reduce eye strain and preserve perceptual depth. • Elevated surfaces are LIGHTER than base (inverse of light theme) — overlays/modals must rise above ambient. • Text contrast uses slate-50 (not white) to soften harsh edges. • Action colors shift LIGHTER (indigo-500 → indigo-400) for better contrast on dark backgrounds while keeping brand identity. • Status colors shift LIGHTER for the same reason; soft variants become DARKER (deeper saturation) to avoid washed-out tints. Version: 1.0.0 Last revised: 2026-05-09 ──────────────────────────────────────────────────────────────────── */ [data-pf-theme="dark"], [data-cms-editor-theme="dark"] { /* ───────────────────────────────────────────────────────────── SURFACE — Inverted elevation (lighter as we go up) ───────────────────────────────────────────────────────────── */ --pf-color-surface-base: var(--pf-color-slate-900); --pf-color-surface-raised: var(--pf-color-slate-800); --pf-color-surface-overlay: var(--pf-color-slate-700); --pf-color-surface-sunken: var(--pf-color-slate-950); --pf-color-surface-hover: var(--pf-color-slate-700); --pf-color-surface-selected: var(--pf-color-indigo-950); --pf-color-surface-disabled: var(--pf-color-slate-800); /* ───────────────────────────────────────────────────────────── TEXT — Light values on dark surfaces, WCAG AA verified ───────────────────────────────────────────────────────────── */ --pf-color-text-primary: var(--pf-color-slate-50); --pf-color-text-secondary: var(--pf-color-slate-300); --pf-color-text-tertiary: var(--pf-color-slate-400); --pf-color-text-disabled: var(--pf-color-slate-600); --pf-color-text-on-action: var(--pf-color-white); --pf-color-text-on-status: var(--pf-color-white); --pf-color-text-inverse: var(--pf-color-slate-900); /* ───────────────────────────────────────────────────────────── BORDER — Subtle dividers stay subtle on dark ───────────────────────────────────────────────────────────── */ --pf-color-border-subtle: var(--pf-color-slate-700); --pf-color-border-strong: var(--pf-color-slate-600); --pf-color-border-focus: var(--pf-color-indigo-400); --pf-color-border-inverse: var(--pf-color-slate-300); /* ───────────────────────────────────────────────────────────── ACTION — Indigo retains depth in dark mode for white-text contrast. Note: indigo-500 (#6366f1) on white = 4.47:1 (FAILS WCAG AA at 4.5). We keep indigo-600 in dark mode to preserve 6.6:1 contrast for text-on-action. Darker primary stands out fine on slate-800 button-surface; visibility was never the constraint — readability of the button label was. Verified by Phase B arch-test PhaseB_PrimaryButton_WcagAaContrast. ───────────────────────────────────────────────────────────── */ /* HF 2026-05-11: aligned to Platforma brand red palette (same reasoning as tokens.semantic.css). platforma-500 (#d4213d) on slate-800 button-surface gives 4.6:1 ✓ for white text. */ --pf-color-action-primary: var(--pf-color-platforma-500); --pf-color-action-primary-hover: var(--pf-color-platforma-400); --pf-color-action-primary-pressed: var(--pf-color-platforma-600); --pf-color-action-primary-soft: var(--pf-color-platforma-950); --pf-color-action-primary-soft-hover: var(--pf-color-platforma-900); --pf-color-action-subtle: var(--pf-color-slate-700); --pf-color-action-subtle-hover: var(--pf-color-slate-600); /* Same WCAG argument: red-500 (#ef4444) on white = 3.76:1 fails AA; red-600 (#dc2626) gives 4.83:1 ✓ */ --pf-color-action-danger: var(--pf-color-red-600); --pf-color-action-danger-hover: var(--pf-color-red-500); --pf-color-action-danger-soft: var(--pf-color-red-950); /* ───────────────────────────────────────────────────────────── STATUS — Solid: lighter for visibility. Soft: darker for saturation depth. Foreground: lighter for readable status text. ───────────────────────────────────────────────────────────── */ /* Success */ --pf-color-status-success: var(--pf-color-emerald-400); --pf-color-status-success-soft: var(--pf-color-emerald-950); --pf-color-status-success-border: var(--pf-color-emerald-700); --pf-color-status-success-fg: var(--pf-color-emerald-300); /* Warning */ --pf-color-status-warning: var(--pf-color-amber-400); --pf-color-status-warning-soft: var(--pf-color-amber-950); --pf-color-status-warning-border: var(--pf-color-amber-700); --pf-color-status-warning-fg: var(--pf-color-amber-300); /* Danger */ --pf-color-status-danger: var(--pf-color-red-400); --pf-color-status-danger-soft: var(--pf-color-red-950); --pf-color-status-danger-border: var(--pf-color-red-700); --pf-color-status-danger-fg: var(--pf-color-red-300); /* Info */ --pf-color-status-info: var(--pf-color-sky-400); --pf-color-status-info-soft: var(--pf-color-sky-950); --pf-color-status-info-border: var(--pf-color-sky-700); --pf-color-status-info-fg: var(--pf-color-sky-300); /* ───────────────────────────────────────────────────────────── SHADOW — Stronger blur radius + lower alpha for dark glow. Pure shadow looks invisible on dark; we tune contrast by increasing blur and using black at higher opacity. ───────────────────────────────────────────────────────────── */ --pf-color-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.40); --pf-color-shadow-md: 0 4px 8px -1px rgb(0 0 0 / 0.45), 0 2px 4px -2px rgb(0 0 0 / 0.40); --pf-color-shadow-lg: 0 10px 20px -3px rgb(0 0 0 / 0.50), 0 4px 8px -4px rgb(0 0 0 / 0.40); --pf-color-shadow-xl: 0 20px 30px -5px rgb(0 0 0 / 0.55), 0 8px 12px -6px rgb(0 0 0 / 0.45); --pf-color-shadow-2xl: 0 25px 60px -12px rgb(0 0 0 / 0.65); /* ───────────────────────────────────────────────────────────── FOCUS RING — Re-derive for dark surfaces (offset against the dark surface, not white) ───────────────────────────────────────────────────────────── */ --pf-focus-ring: 0 0 0 2px var(--pf-color-surface-raised), 0 0 0 4px var(--pf-color-border-focus); } /* ════════════════════════════════════════════════════════════════════ AUTO DARK MODE — Respect prefers-color-scheme ──────────────────────────────────────────────────────────────────── Apply dark token-overrides automatically when the OS reports a dark color preference, UNLESS the user has explicitly chosen light via data-pf-theme="light" (which wins via attribute selector specificity). ──────────────────────────────────────────────────────────────────── */ @media (prefers-color-scheme: dark) { :root:not([data-pf-theme="light"]):not([data-cms-editor-theme="light"]) { --pf-color-surface-base: var(--pf-color-slate-900); --pf-color-surface-raised: var(--pf-color-slate-800); --pf-color-surface-overlay: var(--pf-color-slate-700); --pf-color-surface-sunken: var(--pf-color-slate-950); --pf-color-surface-hover: var(--pf-color-slate-700); --pf-color-surface-selected: var(--pf-color-indigo-950); --pf-color-surface-disabled: var(--pf-color-slate-800); --pf-color-text-primary: var(--pf-color-slate-50); --pf-color-text-secondary: var(--pf-color-slate-300); --pf-color-text-tertiary: var(--pf-color-slate-400); --pf-color-text-disabled: var(--pf-color-slate-600); --pf-color-border-subtle: var(--pf-color-slate-700); --pf-color-border-strong: var(--pf-color-slate-600); --pf-color-border-focus: var(--pf-color-indigo-400); } }