/* ============================================================ VanillaPM — Dark theme token map (CR-034 Phase 1b · Appendix A) ------------------------------------------------------------ App-wide. Re-maps the EXACT SAME token names as tokens.css, so no component markup changes — only colour + shadow are re-authored; spacing / radius / type are inherited from :root. Activated by (set before first paint by the no-FOUC script in partials/_theme_head.html). Every semantic text/surface pair is tuned for WCAG 2.2 AA on dark — not a naive invert. Dark neutrals layer LIGHTER as they rise (page 950 → card 900 → raised 800), the inverse of light. ============================================================ */ :root[data-theme="dark"] { /* ── Brand / Primary — brighter, lower-saturation on dark ── */ --color-primary: #818CF8; /* indigo-400 — fills read on dark */ --color-primary-hover: #A5B4FC; /* indigo-300 */ --color-primary-active: #C7D2FE; /* indigo-200 */ --color-primary-subtle: #2A2F52; /* indigo tint on gray-900 */ --color-primary-focus: #A5B4FC; /* ── Neutrals — surfaces (lighter as they rise) ─────────── */ --color-surface-page: #0B0F1A; /* ~gray-950 */ --color-surface-card: #131A29; /* ~gray-900 */ --color-surface-raised: #1D2534; /* ~gray-800 */ --color-input-bg: #202A3A; /* form fields — a touch lighter than the card so they read as fields */ --color-surface-overlay: rgba(3, 6, 12, 0.66); /* ── Neutrals — borders (hairline) ──────────────────────── */ --color-border: #283040; --color-border-subtle: #1C2331; --color-border-strong: #3A4457; /* ── Neutrals — text ────────────────────────────────────── */ --color-text-heading: #F8FAFC; /* slate-50 */ --color-text-body: #CBD5E1; /* slate-300 — ~9:1 on card */ --color-text-muted: #94A3B8; /* slate-400 — ~5:1 on card */ --color-text-placeholder: #64748B; /* slate-500 */ --color-text-disabled: #475569; /* slate-600 */ --color-text-inverse: #0B0F1A; --color-text-link: #A5B4FC; /* ── Feedback — dark surfaces + bright, AA text ─────────── */ --color-error-surface: #3A1A1D; --color-error-border: #7F1D1D; --color-error-text: #FCA5A5; /* red-300 */ --color-error-strong: #F87171; /* red-400 — destructive */ --color-error-hover: #FCA5A5; --color-success-surface: #10281C; --color-success-border: #166534; --color-success-text: #6EE7A7; /* emerald-300 */ --color-warning-surface: #33270D; --color-warning-border: #92660F; --color-warning-text: #FCD34D; /* amber-300 */ --color-info-surface: #14233F; --color-info-border: #1E40AF; --color-info-text: #93C5FD; /* blue-300 */ /* ── Status badges — task status ────────────────────────── */ --badge-todo-bg: #1D2534; --badge-todo-text: #CBD5E1; --badge-inprogress-bg: #14233F; --badge-inprogress-text: #93C5FD; --badge-inreview-bg: #33270D; --badge-inreview-text: #FCD34D; --badge-done-bg: #10281C; --badge-done-text: #6EE7A7; /* ── Priority / severity ────────────────────────────────── */ --badge-low-bg: #1D2534; --badge-low-text: #CBD5E1; --badge-medium-bg: #14233F; --badge-medium-text: #93C5FD; --badge-high-bg: #33270D; --badge-high-text: #FCD34D; --badge-critical-bg: #3A1A1D; --badge-critical-text: #FCA5A5; /* ── Project status (PMBOK process groups) ──────────────── */ --badge-initiating-bg: #2A2F52; --badge-initiating-text: #C7D2FE; --badge-planning-bg: #14233F; --badge-planning-text: #93C5FD; --badge-executing-bg: #10281C; --badge-executing-text: #6EE7A7; --badge-monitoring-bg: #33270D; --badge-monitoring-text: #FCD34D; --badge-closing-bg: #1D2534; --badge-closing-text: #CBD5E1; /* ── Budget item type ───────────────────────────────────── */ --badge-labour-bg: #2A2F52; --badge-labour-text: #C7D2FE; --badge-material-bg: #33270D; --badge-material-text: #FCD34D; --badge-equipment-bg: #14233F; --badge-equipment-text: #93C5FD; --badge-service-bg: #10281C; --badge-service-text: #6EE7A7; --badge-contingency-bg: #3A1A1D; --badge-contingency-text: #FCA5A5; --badge-other-bg: #1D2534; --badge-other-text: #CBD5E1; /* ── Role badges ────────────────────────────────────────── */ --badge-pm-bg: #2A2F52; --badge-pm-text: #C7D2FE; --badge-member-bg: #14233F; --badge-member-text: #93C5FD; --badge-viewer-bg: #1D2534; --badge-viewer-text: #CBD5E1; --badge-owner-bg: #2A2F52; --badge-owner-text: #C7D2FE; --badge-admin-bg: #14233F; --badge-admin-text: #93C5FD; /* ── Document status (CR-034 Phase 1 additions) ─────────── */ --badge-published-bg: #14233F; --badge-published-text: #93C5FD; --badge-rejected-bg: #3A1A1D; --badge-rejected-text: #FCA5A5; /* ── Shadows — much weaker on dark; lean on surface + border */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.40); --shadow-sm: 0 1px 2px rgba(0,0,0,0.44), 0 1px 3px rgba(0,0,0,0.34); --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.46), 0 2px 4px -2px rgba(0,0,0,0.40); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.52), 0 4px 6px -4px rgba(0,0,0,0.40); --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.58), 0 8px 10px -6px rgba(0,0,0,0.44); --shadow-focus: 0 0 0 3px rgba(165,180,252,0.45); color-scheme: dark; } /* Brand logomark on dark — the sprite mark renders a default-black fill (it has no currentColor), which vanishes on the dark surface; show the brand-indigo colour logomark instead. */ :root[data-theme="dark"] .brand-mark { display: none; } :root[data-theme="dark"] .brand-mark-alt { display: block; }