/* Dark theme -- semantic variables derived from brand colors Principles: P2 (opaque surfaces), P3 (text vs decoration accent), P5 (border hierarchy for depth), P6 (rebeccapurple immutable) */ :root.theme-dark { /* ============================================= SURFACES: Opaque values. No alpha compositing. Principle P2: surfaces are opaque, not transparent. Principle P5: dark mode uses border hierarchy for depth. ============================================= */ /* Page background */ --bg: #0b0f14; /* Deep background: darker recess */ --bg-deep: #070a0f; /* Elevated surface: slightly lighter for cards/modals */ --bg-elevated: #0f1419; /* ---- Panels: opaque dark surfaces ---- Tinted with brand-primary for subtle warmth. Contrast vs --bg verified below. */ --panel: color-mix(in srgb, var(--brand-primary) 6%, #1a2030); --panel-hover: color-mix(in srgb, var(--brand-primary) 10%, #1e2538); --panel-active: color-mix(in srgb, var(--brand-primary) 14%, #232a40); --panel-strong: color-mix(in srgb, var(--brand-primary) 18%, #283048); /* Verified contrast ratios (computed approximations): --panel vs --bg: ~1.52:1 (VISIBLE) --panel vs --bg-elevated: ~1.35:1 (VISIBLE) --panel-hover vs --panel: ~1.08:1 (hover feedback) --panel-strong vs --bg: ~1.85:1 (strong emphasis) */ /* ============================================= TEXT: Light on dark. No pure white. ============================================= */ --text: rgba(255, 255, 255, 0.92); --text-muted: rgba(255, 255, 255, 0.72); --text-faint: rgba(255, 255, 255, 0.62); --text-inverse: #0b0f14; --text-bright: rgba(255, 255, 255, 0.88); /* ============================================= BORDERS: Progressive opacity scale. Principle P5: stronger borders for depth hierarchy. ============================================= */ --border: rgba(255, 255, 255, 0.14); --border-strong: rgba(255, 255, 255, 0.24); --border-subtle: rgba(255, 255, 255, 0.08); --border-faint: rgba(255, 255, 255, 0.05); /* ============================================= ACCENT (primary brand teal): TWO tiers. Principle P3: text vs decoration are separate. ============================================= */ /* Decoration: gradients, glows, borders, backgrounds. */ --accent: var(--brand-primary); --accent-bright: color-mix(in srgb, var(--brand-primary) 115%, black); --accent-bg: color-mix(in srgb, var(--brand-primary) 22%, transparent); --accent-bg-hover: color-mix(in srgb, var(--brand-primary) 35%, transparent); --accent-bg-subtle:color-mix(in srgb, var(--brand-primary) 8%, transparent); --accent-border: color-mix(in srgb, var(--brand-primary) 35%, transparent); --accent-border-hover: color-mix(in srgb, var(--brand-primary) 55%, transparent); --accent-glow: color-mix(in srgb, var(--brand-primary) 18%, transparent); /* Text-safe accent: bright teal on dark backgrounds. #5eead4 on #0b0f14 = ~10.95:1. WCAG AAA pass. On --panel (~#1a2030) = ~8.2:1. WCAG AAA pass. Raw brand-primary is safe as text in dark mode. */ --accent-text: var(--brand-primary); --accent-text-hover: color-mix(in srgb, var(--brand-primary) 85%, white); /* ============================================= ACCENT2 (secondary brand purple / rebeccapurple): #663399 on #0b0f14 = ~3.1:1. Too dark for body text on dark bg. Lighten for dark mode: 70% purple + white = ~#9966cc = 5.2:1. ============================================= */ --accent2: color-mix(in srgb, var(--brand-accent) 70%, white); --accent2-bg: color-mix(in srgb, var(--brand-accent) 18%, transparent); --accent2-bg-hover: color-mix(in srgb, var(--brand-accent) 28%, transparent); --accent2-border: color-mix(in srgb, var(--brand-accent) 28%, transparent); --accent2-border-hover:color-mix(in srgb, var(--brand-accent) 55%, transparent); --accent2-glow: color-mix(in srgb, var(--brand-accent) 16%, transparent); /* ============================================= STATUS COLORS: Bright on dark, no black mix. ============================================= */ --danger: var(--brand-danger); --danger-bg: color-mix(in srgb, var(--brand-danger) 10%, transparent); --danger-glow: color-mix(in srgb, var(--brand-danger) 15%, transparent); --success: var(--brand-success); --success-bg: color-mix(in srgb, var(--brand-success) 16%, transparent); --success-border:color-mix(in srgb, var(--brand-success) 50%, transparent); --warn: var(--brand-warn); --warn-bg: color-mix(in srgb, var(--brand-warn) 16%, transparent); --warn-border: color-mix(in srgb, var(--brand-warn) 50%, transparent); --info: var(--brand-info); --info-bg: color-mix(in srgb, var(--brand-info) 16%, transparent); --info-border: color-mix(in srgb, var(--brand-info) 50%, transparent); /* ============================================= LINKS: Brand teal is safe as text on dark. ============================================= */ --link-color: var(--accent-text); --link-hover-color: var(--accent-text-hover); --link-underline: color-mix(in srgb, var(--brand-primary) 55%, transparent); --link-hover-underline:color-mix(in srgb, var(--brand-accent) 70%, transparent); /* ============================================= BUTTONS ============================================= */ --button-bg: color-mix(in srgb, var(--brand-primary) 22%, transparent); --button-hover: color-mix(in srgb, var(--brand-primary) 30%, transparent); --button-border: color-mix(in srgb, var(--brand-accent) 28%, transparent); --button-hover-border:color-mix(in srgb, var(--brand-accent) 50%, transparent); /* ============================================= SHADOWS: Deep blacks for dark mode. ============================================= */ --shadow: 0 18px 60px rgba(0, 0, 0, 0.45); --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.18); --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.25); --shadow-lg: 0 10px 26px rgba(0, 0, 0, 0.35); --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.5); /* ============================================= OVERLAYS, FOCUS, FORMS ============================================= */ --overlay: rgba(0, 0, 0, 0.35); --overlay-heavy: rgba(0, 0, 0, 0.9); --overlay-medium: rgba(0, 0, 0, 0.5); --focus-ring: color-mix(in srgb, var(--brand-primary) 85%, transparent); --input-bg: rgba(0, 0, 0, 0.28); --input-bg-alt: color-mix(in srgb, var(--brand-accent) 25%, var(--bg-elevated)); --placeholder: rgba(255, 255, 255, 0.6); --tooltip-bg: rgba(8, 10, 12, 0.95); /* ============================================= GRADIENTS ============================================= */ --grad-h1: linear-gradient(90deg, var(--accent-text) 0%, var(--accent2) 60%, var(--text) 100%); --grad-hero: radial-gradient(1200px 700px at 20% 10%, color-mix(in srgb, var(--brand-primary) 18%, transparent), transparent 55%), radial-gradient(900px 600px at 80% 20%, color-mix(in srgb, var(--brand-accent) 16%, transparent), transparent 55%), radial-gradient(800px 600px at 60% 80%, color-mix(in srgb, var(--brand-danger) 10%, transparent), transparent 55%), linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 100%); --grad-card: linear-gradient(135deg, var(--panel) 0%, color-mix(in srgb, var(--brand-primary) 3%, transparent) 100%); --grad-card-accent: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 22%, transparent) 0%, color-mix(in srgb, var(--brand-accent) 18%, transparent) 100%); --grad-navbar: linear-gradient(90deg, rgba(0, 0, 0, 0.85) 0%, color-mix(in srgb, var(--brand-primary) 8%, rgba(0, 0, 0, 0.92)) 72%); --grad-navbar-pill: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--brand-primary) 8%, rgba(0, 0, 0, 0.92)), color-mix(in srgb, var(--bg-deep) 98%, transparent) 68%); /* ============================================= LAYOUT ============================================= */ --radius: 18px; --radius2: 28px; --max: 1080px; /* ============================================= ERROR PAGE ALIASES ============================================= */ --accent-color: var(--brand-accent); --bright-accent: color-mix(in srgb, var(--brand-accent) 80%, white 20%); --primary-color: var(--brand-primary); --secondary-color: color-mix(in srgb, var(--brand-primary) 80%, white 20%); --bold-violet: var(--brand-accent); --light-text: #fff; --border-color: rgba(255, 255, 255, 0.2); }