/** * protrion-dark.css * Protrion Design System — Dark Theme * * The PRIMARY Protrion theme. Dark background (#100F13) with orange accent (#FF2E00). * Apply via: or as default when no theme is specified. * * Requires: protrion-variables.css * Version: 1.0.0 * * WCAG 2.1 contrast notes (inline): * --color-text-primary (#FFF) on --color-bg-primary (#100F13): 19.8:1 (AAA) * --color-text-secondary (#9196A1) on --color-bg-primary: 6.1:1 (AA) * --color-accent (#FF2E00) on --color-bg-primary: 5.2:1 (AA) */ /* Default (dark is the Protrion default — no [data-theme] needed for dark) */ :root, [data-theme="dark"] { /* Backgrounds */ --color-bg-primary: var(--color-brand-black); /* #100F13 */ --color-bg-secondary: var(--color-neutral-900); /* #242528 */ --color-bg-surface: var(--color-neutral-800); /* #303236 */ --color-bg-elevated: var(--color-neutral-700); /* #484A51 */ --color-bg-overlay: rgba(16, 15, 19, 0.85); /* Text */ --color-text-primary: var(--color-brand-white); /* #FFFFFF — 19.8:1 on bg-primary (AAA) */ --color-text-secondary: var(--color-neutral-400); /* #9196A1 — 6.1:1 on bg-primary (AA) */ --color-text-muted: var(--color-neutral-600); /* #61636B — use for non-essential text only */ --color-text-disabled: var(--color-neutral-700); /* #484A51 */ --color-text-on-accent: var(--color-brand-white); /* #FFFFFF on orange */ /* Accent */ --color-accent: var(--color-brand-orange); /* #FF2E00 — 5.2:1 on bg-primary (AA) */ --color-accent-hover: var(--color-brand-orange-hover); /* #CC2500 */ --color-accent-subtle: rgba(255, 46, 0, 0.12); /* Translucent orange for bg highlights */ /* Borders */ --color-border: var(--color-neutral-800); /* #303236 */ --color-border-subtle: var(--color-neutral-900); /* #242528 */ --color-border-strong: var(--color-neutral-700); /* #484A51 */ --color-border-focus: var(--color-brand-orange); /* #FF2E00 */ /* Interactive states */ --color-hover-overlay: rgba(255, 255, 255, 0.05); --color-active-overlay: rgba(255, 255, 255, 0.08); --color-selected-bg: rgba(255, 46, 0, 0.12); --color-selected-border: var(--color-brand-orange); /* Status colors */ --color-success: #22C55E; --color-success-bg: rgba(34, 197, 94, 0.1); --color-warning: #F59E0B; --color-warning-bg: rgba(245, 158, 11, 0.1); --color-error: #EF4444; --color-error-bg: rgba(239, 68, 68, 0.1); --color-info: #3B82F6; --color-info-bg: rgba(59, 130, 246, 0.1); /* Code/terminal */ --color-code-bg: var(--color-neutral-900); --color-code-text: #E2E8F0; /* Scrollbar */ scrollbar-color: var(--color-neutral-700) var(--color-neutral-900); } /* ??? Base element defaults ??????????????????????????????????????????????? */ [data-theme="dark"] body, :root body { background-color: var(--color-bg-primary); color: var(--color-text-primary); font-family: var(--font-body); font-size: var(--text-body-md); line-height: var(--line-height-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } [data-theme="dark"] ::selection, :root ::selection { background-color: rgba(255, 46, 0, 0.3); color: var(--color-brand-white); } /* ??? System preference fallback (no JS required) ???????????????????????? */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg-primary: var(--color-brand-black); --color-bg-secondary: var(--color-neutral-900); --color-bg-surface: var(--color-neutral-800); --color-bg-elevated: var(--color-neutral-700); --color-bg-overlay: rgba(16, 15, 19, 0.85); --color-text-primary: var(--color-brand-white); --color-text-secondary: var(--color-neutral-400); --color-text-muted: var(--color-neutral-600); --color-text-disabled: var(--color-neutral-700); --color-text-on-accent: var(--color-brand-white); --color-accent: var(--color-brand-orange); --color-accent-hover: var(--color-brand-orange-hover); --color-accent-subtle: rgba(255, 46, 0, 0.12); --color-border: var(--color-neutral-800); --color-border-subtle: var(--color-neutral-900); --color-border-strong: var(--color-neutral-700); --color-border-focus: var(--color-brand-orange); } }