/* ========================================================= MOBILEXY · DESIGN TOKENS Single source of truth. Reference these everywhere. ========================================================= */ :root { /* --- COLOR · NEUTRAL SCALE (cool midnight → off-white) --- */ --neutral-0: #05070a; /* deepest void · page background */ --neutral-1: #0a0d12; /* default surface */ --neutral-2: #0f141a; /* raised surface · cards */ --neutral-3: #161c24; /* hover / pressed */ --neutral-4: #1d242e; /* overlays / modals */ --neutral-5: #262f3b; /* dividers strong */ --neutral-6: #3a4554; /* disabled fill */ --neutral-7: #5a6675; /* muted text */ --neutral-8: #818d9d; /* secondary text */ --neutral-9: #b6bfcb; /* primary text muted */ --neutral-10: #d8dee7; /* primary text */ --neutral-11: #f1f4f8; /* high-contrast text · headings */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.16); /* --- COLOR · PRIMARY ACCENT · "EMBER" (was mint, now orange per brand) --- */ --accent: #FFA362; --accent-hover: #FFB683; --accent-press: #E8884A; --accent-ink: #1a0c03; --accent-soft: rgba(255, 163, 98, 0.12); --accent-glow: rgba(255, 163, 98, 0.35); /* --- COLOR · SECONDARY · deep amber --- */ --secondary: #E8884A; --secondary-soft: rgba(232, 136, 74, 0.14); /* --- COLOR · CTA · same family · used for hottest CTAs --- */ --cta: #FFA362; --cta-hover: #FFB683; --cta-press: #E8884A; --cta-ink: #1a0c03; --cta-soft: rgba(255, 163, 98, 0.12); /* --- COLOR · SEMANTIC --- */ --success: #FFA362; --success-soft: rgba(255, 163, 98, 0.12); --warning: #FFC857; --warning-soft: rgba(255, 200, 87, 0.12); --error: #FF6B7E; --error-soft: rgba(255, 107, 126, 0.12); --info: #6BB3FF; --info-soft: rgba(107, 179, 255, 0.12); /* Semantic surfaces */ --bg-page: var(--neutral-0); --bg-surface: var(--neutral-1); --bg-raised: var(--neutral-2); --bg-overlay: var(--neutral-4); /* Elev scale (used by most card-style components) — explicit alias so we can override per-theme without rewriting every consumer. */ --bg-elev-1: var(--neutral-1); --bg-elev-2: var(--neutral-2); --bg-elev-3: var(--neutral-3); --text-hi: var(--neutral-11); --text: var(--neutral-10); --text-mute: var(--neutral-8); --text-dim: var(--neutral-7); /* --- TYPOGRAPHY (anti-AI: serif headlines + sans body + mono numbers) --- */ --font-display: "Fraunces", "Newsreader", Georgia, serif; --font-body: "Geist", "Inter", system-ui, sans-serif; --font-mono: "JetBrains Mono", "Geist Mono", ui-monospace, monospace; --font-grotesk: "Space Grotesk", system-ui, sans-serif; /* type scale (1.250 ratio · major third) */ --fs-display: 72px; --fs-h1: 56px; --fs-h2: 40px; --fs-h3: 28px; --fs-h4: 22px; --fs-h5: 18px; --fs-h6: 15px; --fs-body-l: 18px; --fs-body-m: 15px; --fs-body-s: 13px; --fs-caption: 11px; --lh-tight: 1.05; --lh-snug: 1.2; --lh-body: 1.5; --lh-loose: 1.65; --tracking-tight: -0.02em; --tracking-flat: 0; --tracking-wide: 0.02em; --tracking-caps: 0.12em; /* --- SPACING · 4px base --- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; /* --- RADII --- */ --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-2xl: 32px; --r-pill: 999px; /* --- ELEVATION (multi-layer, cool) --- */ --elev-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.4); --elev-2: 0 1px 0 rgba(255,255,255,0.05) inset, 0 4px 12px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.3); --elev-3: 0 1px 0 rgba(255,255,255,0.06) inset, 0 10px 30px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.35); --elev-4: 0 1px 0 rgba(255,255,255,0.07) inset, 0 24px 60px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.45); --elev-mint: 0 0 0 1px var(--accent-glow), 0 12px 40px rgba(255,163,98,0.18); /* --- MOTION --- */ --dur-instant: 80ms; --dur-fast: 150ms; --dur-base: 220ms; --dur-slow: 380ms; --dur-long: 620ms; /* easings */ --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); /* default */ --ease-in: cubic-bezier(0.55, 0, 0.85, 0.4); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* satisfy */ --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); /* --- LAYOUT --- */ --container: 1200px; --gutter: 24px; /* --- FOCUS RING --- */ --focus-ring: 0 0 0 2px var(--bg-page), 0 0 0 4px var(--accent); } /* ---------- LIGHT THEME (rebuilt — punchy, warm-tint) ---------- */ [data-theme="light"] { /* Warm off-white neutrals with real contrast */ --neutral-0: #faf9f6; /* page bg — subtle warm tint */ --neutral-1: #ffffff; /* surface · cards */ --neutral-2: #f4f3ee; /* raised */ --neutral-3: #e8e6df; /* hover */ --neutral-4: #ffffff; --neutral-5: #d0cec5; --neutral-6: #a5a39a; --neutral-7: #6e6c63; --neutral-8: #4a4842; /* mute — now legible on white */ --neutral-9: #2a2924; --neutral-10: #1a1916; --neutral-11: #0a0907; --border-subtle: rgba(20,18,12,0.08); --border-default: rgba(20,18,12,0.14); --border-strong: rgba(20,18,12,0.22); /* Re-alias elev surfaces for light. Without these every card-style component (signin-modal, bento, vn-pricing, contact-channel, …) fell through to a dark fallback and became "dark card on white page". */ --bg-elev-1: var(--neutral-1); --bg-elev-2: var(--neutral-2); --bg-elev-3: var(--neutral-3); /* Accent — ember in light mode too (no green) */ --accent: #E8702A; --accent-hover: #D4621F; --accent-press: #B85318; --accent-ink: #ffffff; --accent-soft: rgba(232, 112, 42, 0.10); --accent-glow: rgba(232, 112, 42, 0.25); --secondary: #B85318; --secondary-soft: rgba(184, 83, 24, 0.10); --cta: #E8702A; --cta-hover: #D4621F; --cta-press: #B85318; --cta-ink: #ffffff; --cta-soft: rgba(232, 112, 42, 0.10); /* Real shadows so cards lift off light bg */ --elev-1: 0 1px 3px rgba(20,18,12,0.06); --elev-2: 0 6px 16px rgba(20,18,12,0.08), 0 1px 3px rgba(20,18,12,0.04); --elev-3: 0 16px 40px rgba(20,18,12,0.10), 0 2px 8px rgba(20,18,12,0.06); --elev-4: 0 28px 70px rgba(20,18,12,0.14), 0 4px 16px rgba(20,18,12,0.08); --elev-mint: 0 0 0 1px var(--accent-glow), 0 16px 40px rgba(4,169,104,0.14); }