/* Light theme -- semantic variables derived from brand colors Principles: P2 (opaque surfaces), P3 (text vs decoration accent), P4 (alternating contrast >=1.35:1), P6 (rebeccapurple immutable) */ :root.theme-light { /* ============================================= SURFACES: Opaque values. No alpha compositing. Principle P2: surfaces are opaque, not transparent. Principle P4: each level >=1.35:1 from adjacent level. ============================================= */ /* Page background: the lightest surface */ --bg: #f7f8fb; /* Deep background: subtle recess behind page-level panels. vs --bg: ~1.10:1. Used sparingly (hero gradient base). */ --bg-deep: #eef2f7; /* Elevated surface: the brightest white. Used for inner content areas that need to pop off a tinted parent. */ --bg-elevated: #ffffff; /* ---- Panels: visible card/container surfaces ---- Principle P4: panel must contrast >=1.35:1 vs --bg. Opaque. Brand-neutral at the token level. Components can tint with color-mix(var(--brand-primary), var(--panel)) if they need brand-colored surfaces. */ --panel: color-mix(in srgb, var(--brand-primary) 10%, #c7d0db); --panel-hover: color-mix(in srgb, var(--brand-primary) 14%, #c0c9d5); --panel-active: color-mix(in srgb, var(--brand-primary) 18%, #b9c3d0); --panel-strong: color-mix(in srgb, var(--brand-primary) 22%, #b2bcc9); /* Verified contrast ratios (computed approximations): --panel vs --bg: ~1.47:1 (VISIBLE) --panel vs --bg-elevated: ~1.56:1 (VISIBLE) --panel-hover vs --panel: ~1.06:1 (hover feedback) --panel-strong vs --bg: ~1.72:1 (strong emphasis) --bg-elevated vs --panel: ~1.56:1 (alternating child) */ /* ============================================= TEXT: Opaque on dark base. No pure black. ============================================= */ --text: rgba(15, 23, 42, 0.92); --text-muted: rgba(15, 23, 42, 0.68); --text-faint: rgba(15, 23, 42, 0.50); --text-inverse: #f7f8fb; --text-bright: rgba(15, 23, 42, 0.95); /* ============================================= BORDERS: Progressive opacity scale. ============================================= */ --border: rgba(15, 23, 42, 0.14); --border-strong: rgba(15, 23, 42, 0.24); --border-subtle: rgba(15, 23, 42, 0.08); --border-faint: rgba(15, 23, 42, 0.05); /* ============================================= ACCENT (primary brand teal): TWO tiers. Principle P3: text vs decoration are separate. ============================================= */ /* Decoration: gradients, glows, borders, backgrounds. No contrast requirement. Uses bright brand teal. */ --accent: var(--brand-primary); --accent-bright: var(--brand-primary); --accent-bg: color-mix(in srgb, var(--brand-primary) 12%, transparent); --accent-bg-hover: color-mix(in srgb, var(--brand-primary) 20%, transparent); --accent-bg-subtle:color-mix(in srgb, var(--brand-primary) 5%, transparent); --accent-border: color-mix(in srgb, var(--brand-primary) 30%, transparent); --accent-border-hover: color-mix(in srgb, var(--brand-primary) 50%, transparent); --accent-glow: color-mix(in srgb, var(--brand-primary) 12%, transparent); /* Text-safe accent: dark enough for 4.5:1 on white. 55% teal + black = ~#348175 = 4.62:1 on white. WCAG AA pass. Use this for ANY text/link colored with the brand teal. */ --accent-text: color-mix(in srgb, var(--brand-primary) 55%, black); --accent-text-hover: color-mix(in srgb, var(--brand-primary) 45%, black); /* ============================================= ACCENT2 (secondary brand purple / rebeccapurple): #663399 already passes 8.41:1 on white. Derivatives maintain readability. ============================================= */ --accent2: var(--brand-accent); --accent2-bg: color-mix(in srgb, var(--brand-accent) 10%, transparent); --accent2-bg-hover: color-mix(in srgb, var(--brand-accent) 18%, transparent); --accent2-border: color-mix(in srgb, var(--brand-accent) 22%, transparent); --accent2-border-hover:color-mix(in srgb, var(--brand-accent) 45%, transparent); --accent2-glow: color-mix(in srgb, var(--brand-accent) 10%, transparent); /* ============================================= STATUS COLORS: Unchanged (already correct). ============================================= */ --danger: color-mix(in srgb, var(--brand-danger) 85%, black); --danger-bg: color-mix(in srgb, var(--brand-danger) 8%, transparent); --danger-glow: color-mix(in srgb, var(--brand-danger) 10%, transparent); --success: color-mix(in srgb, var(--brand-success) 85%, black); --success-bg: color-mix(in srgb, var(--brand-success) 10%, transparent); --success-border:color-mix(in srgb, var(--brand-success) 40%, transparent); --warn: color-mix(in srgb, var(--brand-warn) 85%, black); --warn-bg: color-mix(in srgb, var(--brand-warn) 10%, transparent); --warn-border: color-mix(in srgb, var(--brand-warn) 40%, transparent); --info: color-mix(in srgb, var(--brand-info) 85%, black); --info-bg: color-mix(in srgb, var(--brand-info) 10%, transparent); --info-border: color-mix(in srgb, var(--brand-info) 40%, transparent); /* ============================================= LINKS: Use text-safe accent, not raw brand color. Principle P3: links are text. Must pass 4.5:1. ============================================= */ --link-color: var(--accent-text); --link-hover-color: var(--accent-text-hover); --link-underline: color-mix(in srgb, var(--brand-primary) 40%, transparent); --link-hover-underline:color-mix(in srgb, var(--brand-accent) 55%, transparent); /* ============================================= BUTTONS: Text-safe accent for borders/text. ============================================= */ --button-bg: color-mix(in srgb, var(--brand-primary) 12%, transparent); --button-hover: color-mix(in srgb, var(--brand-primary) 18%, transparent); --button-border: color-mix(in srgb, var(--brand-accent) 30%, transparent); --button-hover-border:color-mix(in srgb, var(--brand-accent) 50%, transparent); /* ============================================= SHADOWS: Brand-tinted, multi-layer. ============================================= */ --shadow: 0 18px 60px rgba(15, 23, 42, 0.12); --shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.06); --shadow-md: 0 10px 30px rgba(15, 23, 42, 0.08); --shadow-lg: 0 10px 26px rgba(15, 23, 42, 0.12); --shadow-xl: 0 20px 50px rgba(15, 23, 42, 0.15); /* ============================================= OVERLAYS, FOCUS, FORMS: Minor adjustments. ============================================= */ --overlay: rgba(15, 23, 42, 0.08); --overlay-heavy: rgba(15, 23, 42, 0.75); --overlay-medium: rgba(15, 23, 42, 0.35); --focus-ring: color-mix(in srgb, var(--brand-primary) 70%, transparent); --input-bg: rgba(15, 23, 42, 0.04); --input-bg-alt: color-mix(in srgb, var(--brand-accent) 15%, #f0f0f5); --placeholder: rgba(15, 23, 42, 0.45); --tooltip-bg: rgba(15, 23, 42, 0.92); /* ============================================= GRADIENTS: Use decoration accents (bright). Gradients are visual, not text. Raw brand colors fine. ============================================= */ --grad-h1: linear-gradient(90deg, var(--accent-text) 0%, var(--brand-accent) 60%, var(--text) 100%); --grad-hero: radial-gradient(1200px 700px at 20% 10%, color-mix(in srgb, var(--brand-primary) 8%, transparent), transparent 55%), radial-gradient(900px 600px at 80% 20%, color-mix(in srgb, var(--brand-accent) 6%, 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) 2%, transparent) 100%); --grad-card-accent: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 12%, transparent) 0%, color-mix(in srgb, var(--brand-accent) 10%, transparent) 100%); --grad-navbar: linear-gradient(90deg, color-mix(in srgb, var(--bg) 95%, transparent) 0%, color-mix(in srgb, var(--bg) 98%, transparent) 72%); --grad-navbar-pill: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--bg) 92%, transparent), color-mix(in srgb, var(--bg-deep) 98%, transparent) 68%); /* ============================================= LAYOUT: Unchanged. ============================================= */ --radius: 18px; --radius2: 28px; --max: 1080px; /* ============================================= ERROR PAGE ALIASES: Unchanged. ============================================= */ --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: #333; --border-color: rgba(0, 0, 0, 0.2); }