/* ============================================================ LeadGen AI — Design tokens Dark-first. Light mode opts in via `data-theme="light"` on (kept the legacy `.dx.light` selector as an alias). Selectors are scoped under `.dx` to avoid colliding with the legacy `styles.css` palette during migration. ============================================================ */ .dx { /* Surfaces */ --bg: #0A0A0B; --bg-elev-1: #111113; --bg-elev-2: #15151A; --bg-inset: #08080A; /* Text */ --fg: #FAFAF9; --fg-muted: #A1A1A6; --fg-dim: #6C6C72; --fg-faint: #3A3A40; /* Borders */ --line: #1F1F23; --line-strong: #2A2A30; --line-bright: #3A3A42; /* Accents */ --orange: #FF5C1A; --orange-soft: #FF7A3D; --orange-tint: rgba(255, 92, 26, 0.12); --orange-glow: rgba(255, 92, 26, 0.28); --violet: #7C3AED; --violet-tint: rgba(124, 58, 237, 0.12); --violet-glow: rgba(124, 58, 237, 0.30); --success: #00D67E; --success-tint: rgba(0, 214, 126, 0.14); --danger: #FF4D4D; /* Mesh (hero) */ --mesh-orange: rgba(255, 92, 26, 0.18); --mesh-violet: rgba(124, 58, 237, 0.16); /* Type */ --font-sans: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Radii */ --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; /* Layout */ --container: 1200px; --section-y: 120px; --nav-h: 64px; /* Motion */ --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); color-scheme: dark; } /* Light mode — `data-theme="light"` is the spec'd selector, `.light` is the legacy class-based alias still emitted by dx.js. */ .dx.light, .dx[data-theme="light"] { /* Surfaces */ --bg: #FAFAF9; --bg-elev-1: #FFFFFF; --bg-elev-2: #F4F4F2; --bg-inset: #EEEEEC; /* Text */ --fg: #0A0A0B; --fg-muted: #46464C; --fg-dim: #6C6C72; --fg-faint: #C2C2C6; /* Borders */ --line: #E5E5E5; --line-strong: #D4D4D4; --line-bright: #BDBDBD; /* Accent tints — softer on light backgrounds so chips/badges don't glare */ --orange-tint: rgba(255, 92, 26, 0.10); --orange-glow: rgba(255, 92, 26, 0.22); --violet-tint: rgba(124, 58, 237, 0.10); --violet-glow: rgba(124, 58, 237, 0.24); --success-tint: rgba(0, 167, 99, 0.12); /* Mesh (hero) */ --mesh-orange: rgba(255, 92, 26, 0.10); --mesh-violet: rgba(124, 58, 237, 0.08); color-scheme: light; }