:root { --font-sans: "Inter", system-ui, -apple-system, sans-serif; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --transition-theme: background-color 0.45s ease, color 0.35s ease, border-color 0.35s ease; /* Teal brand gradient (hero CTAs, AI surfaces) */ --ai-gradient: linear-gradient(105deg, #0f766e 0%, #14b8a6 40%, #06b6d4 100%); --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 72px; --header-h: 60px; --z-header: 100; --z-chat: 200; } /* Light theme */ :root[data-theme="light"], :root:not([data-theme]) { --bg: #f6f7fb; --bg-elevated: #ffffff; --bg-muted: #eef0f6; --text: #0f172a; --text-muted: #475569; --border: rgba(15, 23, 42, 0.08); --accent: #0d9488; --accent-soft: rgba(13, 148, 136, 0.14); --accent-glow: rgba(13, 148, 136, 0.38); --ai-cyan: #06b6d4; --ai-mint: #10b981; --hero-orb-1: rgba(13, 148, 136, 0.28); --hero-orb-2: rgba(6, 182, 212, 0.2); /* Hero wallet pocket — dark shell on light page for contrast */ --wallet-shell-bg: #151c2c; --wallet-shell-border: rgba(241, 245, 249, 0.12); --wallet-shell-divider: rgba(241, 245, 249, 0.1); --wallet-shell-text: #f1f5f9; --wallet-shell-text-muted: rgba(241, 245, 249, 0.55); } /* Dark theme */ :root[data-theme="dark"] { --bg: #070a12; --bg-elevated: #0f1420; --bg-muted: #151c2c; --text: #f1f5f9; --text-muted: #94a3b8; --border: rgba(241, 245, 249, 0.08); --accent: #14b8a6; --accent-soft: rgba(20, 184, 166, 0.18); --accent-glow: rgba(20, 184, 166, 0.45); --ai-cyan: #22d3ee; --ai-mint: #34d399; --hero-orb-1: rgba(20, 184, 166, 0.24); --hero-orb-2: rgba(34, 211, 238, 0.15); --ai-gradient: linear-gradient(105deg, #115e59 0%, #2dd4bf 45%, #67e8f9 100%); /* Hero wallet pocket — light shell on dark page for contrast */ --wallet-shell-bg: #e4eaf4; --wallet-shell-border: rgba(15, 23, 42, 0.12); --wallet-shell-divider: rgba(15, 23, 42, 0.1); --wallet-shell-text: #0f172a; --wallet-shell-text-muted: #64748b; } /* ─── Accent presets (optional data-accent on ) ─── */ :root[data-theme="light"][data-accent="ocean"], :root:not([data-theme])[data-accent="ocean"] { --accent: #0369a1; --accent-soft: rgba(3, 105, 161, 0.14); --accent-glow: rgba(3, 105, 161, 0.38); --ai-cyan: #0ea5e9; --ai-mint: #22c55e; --hero-orb-1: rgba(3, 105, 161, 0.26); --hero-orb-2: rgba(14, 165, 233, 0.18); --ai-gradient: linear-gradient(105deg, #075985 0%, #0ea5e9 42%, #38bdf8 100%); } :root[data-theme="dark"][data-accent="ocean"] { --accent: #38bdf8; --accent-soft: rgba(56, 189, 248, 0.18); --accent-glow: rgba(56, 189, 248, 0.42); --ai-cyan: #67e8f9; --ai-mint: #4ade80; --hero-orb-1: rgba(56, 189, 248, 0.22); --hero-orb-2: rgba(125, 211, 252, 0.14); --ai-gradient: linear-gradient(105deg, #0369a1 0%, #38bdf8 45%, #7dd3fc 100%); } :root[data-theme="light"][data-accent="violet"], :root:not([data-theme])[data-accent="violet"] { --accent: #7c3aed; --accent-soft: rgba(124, 58, 237, 0.14); --accent-glow: rgba(124, 58, 237, 0.38); --ai-cyan: #818cf8; --ai-mint: #34d399; --hero-orb-1: rgba(124, 58, 237, 0.24); --hero-orb-2: rgba(167, 139, 250, 0.18); --ai-gradient: linear-gradient(105deg, #5b21b6 0%, #8b5cf6 45%, #c4b5fd 100%); } :root[data-theme="dark"][data-accent="violet"] { --accent: #a78bfa; --accent-soft: rgba(167, 139, 250, 0.2); --accent-glow: rgba(167, 139, 250, 0.45); --ai-cyan: #c4b5fd; --ai-mint: #6ee7b7; --hero-orb-1: rgba(167, 139, 250, 0.22); --hero-orb-2: rgba(196, 181, 253, 0.14); --ai-gradient: linear-gradient(105deg, #6d28d9 0%, #a78bfa 45%, #ddd6fe 100%); } :root[data-theme="light"][data-accent="rose"], :root:not([data-theme])[data-accent="rose"] { --accent: #e11d48; --accent-soft: rgba(225, 29, 72, 0.12); --accent-glow: rgba(225, 29, 72, 0.34); --ai-cyan: #f472b6; --ai-mint: #fb923c; --hero-orb-1: rgba(225, 29, 72, 0.22); --hero-orb-2: rgba(244, 114, 182, 0.16); --ai-gradient: linear-gradient(105deg, #9f1239 0%, #f43f5e 42%, #fda4af 100%); } :root[data-theme="dark"][data-accent="rose"] { --accent: #fb7185; --accent-soft: rgba(251, 113, 133, 0.18); --accent-glow: rgba(251, 113, 133, 0.42); --ai-cyan: #fbcfe8; --ai-mint: #fcd34d; --hero-orb-1: rgba(251, 113, 133, 0.2); --hero-orb-2: rgba(253, 164, 175, 0.14); --ai-gradient: linear-gradient(105deg, #be123c 0%, #fb7185 45%, #fecdd3 100%); } :root[data-theme="light"][data-accent="amber"], :root:not([data-theme])[data-accent="amber"] { --accent: #d97706; --accent-soft: rgba(217, 119, 6, 0.14); --accent-glow: rgba(217, 119, 6, 0.36); --ai-cyan: #f59e0b; --ai-mint: #84cc16; --hero-orb-1: rgba(217, 119, 6, 0.22); --hero-orb-2: rgba(251, 191, 36, 0.18); --ai-gradient: linear-gradient(105deg, #b45309 0%, #f59e0b 42%, #fcd34d 100%); } :root[data-theme="dark"][data-accent="amber"] { --accent: #fbbf24; --accent-soft: rgba(251, 191, 36, 0.18); --accent-glow: rgba(251, 191, 36, 0.42); --ai-cyan: #fde68a; --ai-mint: #a3e635; --hero-orb-1: rgba(251, 191, 36, 0.2); --hero-orb-2: rgba(253, 224, 71, 0.14); --ai-gradient: linear-gradient(105deg, #b45309 0%, #fbbf24 45%, #fde68a 100%); } :root[data-theme="light"][data-accent="emerald"], :root:not([data-theme])[data-accent="emerald"] { --accent: #059669; --accent-soft: rgba(5, 150, 105, 0.14); --accent-glow: rgba(5, 150, 105, 0.36); --ai-cyan: #14b8a6; --ai-mint: #22c55e; --hero-orb-1: rgba(5, 150, 105, 0.24); --hero-orb-2: rgba(52, 211, 153, 0.18); --ai-gradient: linear-gradient(105deg, #047857 0%, #10b981 42%, #6ee7b7 100%); } :root[data-theme="dark"][data-accent="emerald"] { --accent: #34d399; --accent-soft: rgba(52, 211, 153, 0.18); --accent-glow: rgba(52, 211, 153, 0.42); --ai-cyan: #5eead4; --ai-mint: #a3e635; --hero-orb-1: rgba(52, 211, 153, 0.22); --hero-orb-2: rgba(110, 231, 183, 0.14); --ai-gradient: linear-gradient(105deg, #065f46 0%, #34d399 45%, #a7f3d0 100%); }