/* ========================================================================== Theme - Light Scoped to [data-theme="light"], activated via the header theme toggle or CONFIG.THEME = "light". No HTML changes are required to switch themes - only the data-theme attribute on changes, driven by theme.js. ========================================================================== */ :root[data-theme="light"] { --color-primary: var(--brand-teal-700); --color-primary-hover: var(--brand-teal-500); --color-primary-active: var(--brand-teal-900); --color-secondary: var(--brand-charcoal-700); --color-secondary-hover: var(--brand-charcoal-500); --color-accent: var(--brand-amber-600); --color-accent-hover: var(--brand-amber-500); --color-bg: #ffffff; --color-surface: #f7f8fc; --color-surface-2: #eef0f7; --color-surface-3: #e4e7f2; --color-border: #e2e5ee; --color-border-strong: #cbd0e2; --color-text-primary: #0f1222; --color-text-secondary: #4b5268; --color-text-muted: #8890a3; --color-text-inverse: #ffffff; --shadow-sm: 0 1px 2px rgba(15, 18, 34, 0.06); --shadow-md: 0 4px 16px rgba(15, 18, 34, 0.08); --shadow-lg: 0 12px 32px rgba(15, 18, 34, 0.1); --shadow-xl: 0 24px 64px rgba(15, 18, 34, 0.12); --glass-bg: rgba(255, 255, 255, 0.72); --glass-border: rgba(15, 18, 34, 0.08); color-scheme: light; } :root[data-theme="light"] body { background-image: radial-gradient(circle at 12% -8%, rgba(var(--brand-teal-500-rgb), 0.08), transparent 40%), radial-gradient(circle at 88% 0%, rgba(var(--brand-charcoal-700-rgb), 0.05), transparent 38%); } :root[data-theme="light"] .cta-banner .btn--primary, :root[data-theme="light"] .sidebar__widget--cta .btn--primary { color: var(--brand-teal-700); }