/** * protrion-light.css * Protrion Design System — Light Theme * * The light variant of the Protrion theme. Light grey background (#F0F1F3) with orange accent. * Apply via: * * Requires: protrion-variables.css, protrion-dark.css (provides base :root defaults) * Version: 1.0.0 * * WCAG 2.1 contrast notes (inline): * --color-text-primary (#100F13) on --color-bg-primary (#F0F1F3): 18.6:1 (AAA) * --color-text-secondary (#484A51) on --color-bg-primary: 8.4:1 (AAA) * --color-accent (#FF2E00) on --color-bg-primary: 4.9:1 (AA) */ [data-theme="light"] { /* Backgrounds */ --color-bg-primary: var(--color-brand-light-grey); /* #F0F1F3 */ --color-bg-secondary: var(--color-brand-white); /* #FFFFFF */ --color-bg-surface: var(--color-brand-white); /* #FFFFFF */ --color-bg-elevated: var(--color-brand-white); /* #FFFFFF */ --color-bg-overlay: rgba(16, 15, 19, 0.6); /* Text */ --color-text-primary: var(--color-brand-black); /* #100F13 — 18.6:1 on bg-primary (AAA) */ --color-text-secondary: var(--color-neutral-700); /* #484A51 — 8.4:1 on white (AAA) */ --color-text-muted: var(--color-neutral-500); /* #797C86 */ --color-text-disabled: var(--color-neutral-400); /* #9196A1 */ --color-text-on-accent: var(--color-brand-white); /* #FFFFFF on orange */ /* Accent */ --color-accent: var(--color-brand-orange); /* #FF2E00 — 4.9:1 on bg-primary (AA) */ --color-accent-hover: var(--color-brand-orange-hover); /* #CC2500 */ --color-accent-subtle: rgba(255, 46, 0, 0.08); /* Translucent orange for bg highlights */ /* Borders */ --color-border: var(--color-neutral-100); /* #DFE0E5 */ --color-border-subtle: var(--color-neutral-200); /* #CCCFD6 — for hairlines */ --color-border-strong: var(--color-neutral-300); /* #B8BBC5 */ --color-border-focus: var(--color-brand-orange); /* #FF2E00 */ /* Interactive states */ --color-hover-overlay: rgba(16, 15, 19, 0.04); --color-active-overlay: rgba(16, 15, 19, 0.08); --color-selected-bg: rgba(255, 46, 0, 0.08); --color-selected-border: var(--color-brand-orange); /* Status colors (same hue, lighter bg for light mode) */ --color-success: #16A34A; --color-success-bg: rgba(22, 163, 74, 0.08); --color-warning: #D97706; --color-warning-bg: rgba(217, 119, 6, 0.08); --color-error: #DC2626; --color-error-bg: rgba(220, 38, 38, 0.08); --color-info: #2563EB; --color-info-bg: rgba(37, 99, 235, 0.08); /* Code/terminal */ --color-code-bg: var(--color-neutral-100); --color-code-text: var(--color-brand-black); /* Scrollbar */ scrollbar-color: var(--color-neutral-300) var(--color-neutral-100); } /* ??? Base element overrides for light mode ??????????????????????????????? */ [data-theme="light"] body { background-color: var(--color-bg-primary); color: var(--color-text-primary); -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto; } [data-theme="light"] ::selection { background-color: rgba(255, 46, 0, 0.15); color: var(--color-brand-black); } /* ??? System preference for light ???????????????????????????????????????? */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --color-bg-primary: var(--color-brand-light-grey); --color-bg-secondary: var(--color-brand-white); --color-bg-surface: var(--color-brand-white); --color-bg-elevated: var(--color-brand-white); --color-bg-overlay: rgba(16, 15, 19, 0.6); --color-text-primary: var(--color-brand-black); --color-text-secondary: var(--color-neutral-700); --color-text-muted: var(--color-neutral-500); --color-text-disabled: var(--color-neutral-400); --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.08); --color-border: var(--color-neutral-100); --color-border-subtle: var(--color-neutral-200); --color-border-strong: var(--color-neutral-300); --color-border-focus: var(--color-brand-orange); } }