/** * Al-Bashayer — Dark Mode * * Activated via [data-theme="dark"] on . * Overrides CSS custom properties for dark color scheme. * * @see PRD/08-Theme-Design-System.md §8.4 */ [data-theme="dark"] { color-scheme: dark; /* Surface */ --wp--preset--color--surface: #1A202C; --wp--preset--color--surface-alt: #2D3748; --wp--preset--color--surface-elevated: #2D3748; /* Text */ --wp--preset--color--text-primary: #F7FAFC; --wp--preset--color--text-secondary: #CBD5E0; --wp--preset--color--text-muted: #718096; /* Border */ --wp--preset--color--border: #4A5568; /* Primary — slightly lightened for contrast */ --wp--preset--color--primary: #2A7A5F; --wp--preset--color--primary-light: #38A169; --wp--preset--color--primary-dark: #1B4D3E; /* Accent stays bright */ --wp--preset--color--accent: #D4BC76; /* Shadows — stronger opacity for dark backgrounds */ --ab-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.2); --ab-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3); --ab-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.3); } /* Dark mode form inputs */ [data-theme="dark"] .ab-input, [data-theme="dark"] .ab-select, [data-theme="dark"] .ab-textarea { background-color: var(--wp--preset--color--surface-alt); color: var(--wp--preset--color--text-primary); border-color: var(--wp--preset--color--border); } /* Dark mode cards */ [data-theme="dark"] .ab-card { background-color: var(--wp--preset--color--surface-alt); border-color: var(--wp--preset--color--border); } /* Dark mode badges — slightly adjust backgrounds */ [data-theme="dark"] .ab-badge-draft { background: #2D3748; color: #CBD5E0; } [data-theme="dark"] .ab-badge-pending { background: #744210; color: #FEFCBF; } [data-theme="dark"] .ab-badge-review { background: #2A4365; color: #BEE3F8; } [data-theme="dark"] .ab-badge-process { background: #276749; color: #C6F6D5; } /* Skeleton in dark */ [data-theme="dark"] .ab-skeleton { background-color: var(--wp--preset--color--border); }