/* ========================================================================== PUBLIC PAGES THEME (landing, auth, become-a-teacher) Public pages always render light, regardless of any dark-mode preference saved from a dashboard visit — none of the reference mockups (index.html etc.) define a dark variant, and these pages have no theme toggle of their own. `body.public-light` is essential and not redundant: sits OUTSIDE .ld/.auth-page, so scoping to those alone left the page background resolving to the dark tokens whenever dark mode was set. Defines BOTH this project's semantic names (--bg-page, --text-primary, ...) AND the reference mockups' own names (--background, --text, ...) — tokens.css v6 aliases the two together, but that aliasing happens at :root, so a descendant element (.ld, .auth-page) that's supposed to override the *dark* values needs to re-pin every name a page might actually use, not just one side of the alias. ========================================================================== */ body.public-light, .ld, .auth-page { --bg-page: var(--neutral-50); --bg-surface: var(--neutral-0); --bg-surface-raised: var(--neutral-0); --bg-surface-hover: var(--neutral-100); --bg-accent-tint: var(--violet-100); --bg-inverse: var(--neutral-900); --text-primary: var(--neutral-900); --text-secondary: var(--neutral-600); --text-muted: var(--neutral-400); --text-faint: var(--neutral-400); --text-on-inverse: var(--neutral-50); --text-on-inverse-muted: var(--neutral-200); --border-default: var(--neutral-200); --border-strong: #C7CDD3; --brand-primary: var(--violet-500); --brand-primary-hover: var(--violet-700); --brand-primary-active: var(--violet-900); --brand-primary-soft: var(--violet-100); --brand-on-primary: var(--neutral-0); --accent: var(--violet-500); --accent-strong: var(--violet-700); --accent-soft: var(--violet-100); --accent-on: var(--neutral-0); --success: var(--success-500); --success-soft: var(--success-50); --warning: var(--warning-500); --warning-soft: var(--warning-50); --danger: var(--danger-500); --danger-soft: var(--danger-50); --info: var(--info-500); --info-soft: var(--info-50); /* Reference-mockup-named aliases — see tokens.css v6's :root block for why both naming schemes exist side by side. */ --primary: var(--violet-500); --primary-hover: var(--violet-700); --primary-dark: var(--violet-900); --primary-light: var(--violet-200); --primary-soft: var(--violet-100); --background: var(--neutral-50); --surface: var(--neutral-0); --surface-soft: var(--neutral-100); --text: var(--neutral-900); --border: var(--neutral-200); --shadow-primary-sm: var(--shadow-primary); --shadow-primary-md: var(--shadow-primary-hover); --shadow-primary-lg: 0 24px 48px rgba(121, 80, 242, 0.18); background: var(--bg-page); color: var(--text-primary); color-scheme: light; }