/* ========================================================= Design tokens — one file, three themes. Switch with ========================================================= */ :root, [data-theme="modern"] { --font-sans: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --bg: #ffffff; --bg-soft: #f6f8fd; --hero-wash: radial-gradient(1200px 480px at 50% -140px, #e0e7ff 0%, rgba(224,231,255,0) 70%), linear-gradient(180deg, #f7f9ff 0%, #ffffff 78%); --surface: #ffffff; --surface-2: #fbfcff; --logo-plate: #ffffff; --border: #e5e8f2; --border-strong: #d3d8e8; --text: #14162b; --text-muted: #5b6178; --text-faint: #868ca3; --accent: #4f46e5; --accent-soft: #eef0ff; --accent-ink: #ffffff; --accent-2: #0891b2; --star: #f5a524; --success: #009e61; --nav-bg: rgba(255, 255, 255, 0.82); --nav-border: #e5e8f2; --nav-ink: #14162b; --brand-badge: linear-gradient(135deg, #4f46e5, #0891b2); --radius: 14px; --radius-lg: 22px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(20, 22, 43, .06), 0 1px 3px rgba(20, 22, 43, .04); --shadow-md: 0 4px 12px rgba(20, 22, 43, .07), 0 2px 4px rgba(20, 22, 43, .04); --shadow-lg: 0 18px 40px -12px rgba(31, 35, 78, .22), 0 6px 14px -6px rgba(31, 35, 78, .12); --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); } /* ---------- Dark premium ---------- */ [data-theme="dark"] { --bg: #0a0e1c; --bg-soft: #0e1428; --hero-wash: radial-gradient(1100px 460px at 50% -160px, rgba(99,102,241,.30) 0%, rgba(99,102,241,0) 72%), linear-gradient(180deg, #0d1226 0%, #0a0e1c 76%); --surface: #121a30; --surface-2: #16203a; --logo-plate: #ffffff; --border: #23304f; --border-strong: #33436b; --text: #eef1fa; --text-muted: #9aa5c4; --text-faint: #7b86a6; --accent: #818cf8; --accent-soft: #1b2445; --accent-ink: #0a0e1c; --accent-2: #22d3ee; --star: #fbbf24; --success: #10b981; --nav-bg: rgba(10, 14, 28, .78); --nav-border: #1e2942; --nav-ink: #eef1fa; --brand-badge: linear-gradient(135deg, #6366f1, #22d3ee); --shadow-sm: 0 1px 2px rgba(0,0,0,.5); --shadow-md: 0 6px 16px rgba(0,0,0,.45); --shadow-lg: 0 20px 44px -14px rgba(0,0,0,.7), 0 0 0 1px rgba(129,140,248,.18); } /* ---------- Warm & friendly ---------- */ [data-theme="warm"] { --bg: #fdfaf4; --bg-soft: #f8f2e7; --hero-wash: radial-gradient(1100px 460px at 50% -150px, #fde9c8 0%, rgba(253,233,200,0) 70%), linear-gradient(180deg, #fdf7ec 0%, #fdfaf4 78%); --surface: #ffffff; --surface-2: #fffdf9; --logo-plate: #ffffff; --border: #ebe0cd; --border-strong: #dccdb2; --text: #2a251d; --text-muted: #6b6153; --text-faint: #948976; --accent: #0f766e; --accent-soft: #e3f2ef; --accent-ink: #ffffff; --accent-2: #d97706; --star: #d97706; --success: #0f766e; --nav-bg: rgba(253, 250, 244, .85); --nav-border: #ebe0cd; --nav-ink: #2a251d; --brand-badge: linear-gradient(135deg, #0f766e, #d97706); --radius: 18px; --radius-lg: 26px; --shadow-sm: 0 1px 2px rgba(80, 60, 30, .07); --shadow-md: 0 4px 14px rgba(80, 60, 30, .09); --shadow-lg: 0 18px 38px -12px rgba(80, 60, 30, .2); }