/* ═══════════════════════════════════════════════════════════════ THEME TOKENS — controlled by [data-theme="dark"|"light"] on ═══════════════════════════════════════════════════════════════ */ :root { /* Brand colors — same in both themes */ --teal: #00E5C7; --teal-deep: #0077B6; --teal-mid: #1aa9d9; --blue-primary: #3a5aff; --blue-bright: #4466ff; --gold: #FFD700; --danger: #ff4757; --success: #2ed573; --purple: #9B59B6; --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } /* ── DARK THEME (default) ── */ html[data-theme="dark"] { --bg: #000000; --bg-deep: #050505; --bg-card: #111318; --bg-card-2: #12141c; --bg-input: #1a1d2e; --bg-input-border: #2a2d3a; --bg-onboarding: #060a22; --bg-onboarding-end: #030614; --bg-muted-btn: #2a2d3a; --bg-muted-btn-hover: #353848; --text-primary: #ffffff; --text-secondary: #e0e4ec; --text-muted: #8a8f9e; --text-dim: #555a6a; --text-on-light: #111111; --border-soft: rgba(255,255,255,0.08); --border-softer: rgba(255,255,255,0.04); --border-subtle: rgba(255,255,255,0.03); --teal-tint-bg: rgba(0,229,199,0.04); --teal-tint-border: rgba(0,229,199,0.15); --teal-glow: rgba(0,229,199,0.25); --gold-tint-bg: rgba(255,215,0,0.08); --gold-tint-border: rgba(255,215,0,0.1); --shadow-card: 0 4px 24px rgba(0,0,0,0.4); --frame-border: #1a1a1a; --page-bg: #050505; --status-bar-color: #ffffff; --backdrop-grad: linear-gradient(transparent, rgba(0,0,0,0.85)); --aurora-multiplier: 1; } /* ── LIGHT THEME ── */ html[data-theme="light"] { --bg: #f5f7fb; --bg-deep: #eef1f7; --bg-card: #ffffff; --bg-card-2: #ffffff; --bg-input: #f0f3f9; --bg-input-border: #dde2ec; --bg-onboarding: #f0f6fb; --bg-onboarding-end: #e6eef6; --bg-muted-btn: #e8ebf2; --bg-muted-btn-hover: #dde2ec; --text-primary: #0a1628; --text-secondary: #2a3548; --text-muted: #6b7384; --text-dim: #9aa0ad; --text-on-light: #ffffff; --border-soft: rgba(10,22,40,0.08); --border-softer: rgba(10,22,40,0.05); --border-subtle: rgba(10,22,40,0.04); --teal-tint-bg: rgba(0,119,182,0.06); --teal-tint-border: rgba(0,119,182,0.18); --teal-glow: rgba(0,119,182,0.18); --gold-tint-bg: rgba(212,160,23,0.1); --gold-tint-border: rgba(212,160,23,0.2); --shadow-card: 0 4px 20px rgba(10,22,40,0.06); --frame-border: #d5dae5; --page-bg: #e2e7ef; --status-bar-color: #0a1628; --backdrop-grad: linear-gradient(transparent, rgba(245,247,251,0.92)); --aurora-multiplier: 0.55; } * { margin:0; padding:0; box-sizing:border-box; } html, body { font-family: var(--font); background: var(--page-bg); min-height: 100%; -webkit-font-smoothing: antialiased; transition: background 0.3s ease; } /* ═══════════════════════════════════════════════════════════════ THEME TOGGLE FAB — floating outside phone frame ═══════════════════════════════════════════════════════════════ */ .theme-toggle { position: fixed; top: 24px; right: 24px; z-index: 9999; display: flex; align-items: center; gap: 6px; padding: 8px 14px 8px 8px; background: rgba(0,0,0,0.85); color: #fff; border: 1px solid rgba(255,255,255,0.08); border-radius: 999px; cursor: pointer; font-size: 12px; font-weight: 600; font-family: var(--font); backdrop-filter: blur(20px); box-shadow: 0 8px 32px rgba(0,0,0,0.3); transition: all 0.2s; } html[data-theme="light"] .theme-toggle { background: rgba(255,255,255,0.95); color: #0a1628; border-color: rgba(10,22,40,0.1); box-shadow: 0 8px 32px rgba(10,22,40,0.12); } .theme-toggle:hover { transform: translateY(-1px); } .theme-toggle .ic { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--teal), var(--teal-deep)); display: flex; align-items: center; justify-content: center; color: #fff; } .theme-toggle .ic .ti { font-size: 16px; }