/* FitBot v2.0 — Theme system - Default: dark (brand identity) - prefers-color-scheme: light => soft light palette (auto) - Manual override via or Variables used by app code; overrides for legacy Tailwind utility classes. */ :root { --bg-base: #0b1020; --bg-surface: rgba(17, 24, 39, .7); --bg-surface-2: rgba(30, 41, 59, .5); --text-base: #e5e7eb; --text-muted: #94a3b8; --text-subtle: #64748b; --border-soft: rgba(255, 255, 255, .06); --border-strong: rgba(255, 255, 255, .14); --brand-1: #10b981; --brand-2: #8b5cf6; --accent: #14b8a6; --danger: #ef4444; --warning: #f59e0b; --success: #10b981; --grad-1: radial-gradient(1200px 700px at 10% -10%, rgba(16,185,129,.20), transparent 60%), radial-gradient(1000px 600px at 110% 10%, rgba(139,92,246,.25), transparent 60%), linear-gradient(180deg, #0b1020 0%, #0a0e1a 100%); color-scheme: dark; } /* ---------- Auto light mode (only if user did NOT force dark) ---------- */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg-base: #f6f7fb; --bg-surface: rgba(255, 255, 255, .85); --bg-surface-2: rgba(241, 245, 249, .85); --text-base: #0f172a; --text-muted: #475569; --text-subtle: #64748b; --border-soft: rgba(15, 23, 42, .08); --border-strong: rgba(15, 23, 42, .14); --grad-1: radial-gradient(1200px 700px at 10% -10%, rgba(16,185,129,.18), transparent 60%), radial-gradient(1000px 600px at 110% 10%, rgba(139,92,246,.18), transparent 60%), linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%); color-scheme: light; } } /* ---------- Manual override ---------- */ :root[data-theme="light"] { --bg-base: #f6f7fb; --bg-surface: rgba(255, 255, 255, .85); --bg-surface-2: rgba(241, 245, 249, .85); --text-base: #0f172a; --text-muted: #475569; --text-subtle: #64748b; --border-soft: rgba(15, 23, 42, .08); --border-strong: rgba(15, 23, 42, .14); --grad-1: radial-gradient(1200px 700px at 10% -10%, rgba(16,185,129,.18), transparent 60%), radial-gradient(1000px 600px at 110% 10%, rgba(139,92,246,.18), transparent 60%), linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%); color-scheme: light; } /* ---------- Standalone PWA: hide any browser chrome leaks, safe-area-inset ---------- */ html, body { /* iOS notch / Android nav bar */ padding-top: env(safe-area-inset-top, 0); padding-right: env(safe-area-inset-right, 0); padding-bottom: env(safe-area-inset-bottom, 0); padding-left: env(safe-area-inset-left, 0); -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; } /* When running standalone (installed PWA), prevent text-size auto-adjust */ @media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) { html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { user-select: none; -webkit-user-select: none; } /* Allow selecting in obvious editable areas */ input, textarea, [contenteditable="true"], .selectable, code, pre { user-select: text; -webkit-user-select: text; } } /* ---------- Light mode legacy class overrides (for Tailwind utilities used inline) ---------- */ @media (prefers-color-scheme: light) { html:not([data-theme="dark"]) body.grad-bg, html:not([data-theme="dark"]) .grad-bg { background: var(--grad-1) !important; color: var(--text-base) !important; } html:not([data-theme="dark"]) body { background: var(--bg-base); color: var(--text-base); } html:not([data-theme="dark"]) .glass { background: var(--bg-surface) !important; border-color: var(--border-soft) !important; backdrop-filter: blur(12px) saturate(140%); } html:not([data-theme="dark"]) .text-slate-400 { color: #475569 !important; } html:not([data-theme="dark"]) .text-slate-300 { color: #334155 !important; } html:not([data-theme="dark"]) .text-slate-500 { color: #64748b !important; } html:not([data-theme="dark"]) .text-slate-200 { color: #1e293b !important; } html:not([data-theme="dark"]) [class*="bg-slate-800"] { background: rgba(15, 23, 42, .06) !important; color: #0f172a !important; } html:not([data-theme="dark"]) [class*="bg-slate-900"] { background: rgba(15, 23, 42, .04) !important; color: #0f172a !important; } } html[data-theme="light"] body.grad-bg, html[data-theme="light"] .grad-bg { background: var(--grad-1) !important; color: var(--text-base) !important; } html[data-theme="light"] body { background: var(--bg-base); color: var(--text-base); } html[data-theme="light"] .glass { background: var(--bg-surface) !important; border-color: var(--border-soft) !important; backdrop-filter: blur(12px) saturate(140%); } html[data-theme="light"] .text-slate-400 { color: #475569 !important; } html[data-theme="light"] .text-slate-300 { color: #334155 !important; } html[data-theme="light"] .text-slate-500 { color: #64748b !important; } html[data-theme="light"] .text-slate-200 { color: #1e293b !important; } html[data-theme="light"] [class*="bg-slate-800"] { background: rgba(15, 23, 42, .06) !important; color: #0f172a !important; } html[data-theme="light"] [class*="bg-slate-900"] { background: rgba(15, 23, 42, .04) !important; color: #0f172a !important; } /* Useful utility classes referencing the variables (for new components) */ .fb-surface { background: var(--bg-surface); color: var(--text-base); border: 1px solid var(--border-soft); } .fb-text-muted { color: var(--text-muted); } .fb-border { border-color: var(--border-soft); } /* Smooth theme transition (avoid flicker) */ html, body, .glass, .grad-bg, .fb-surface { transition: background-color .25s ease, color .25s ease, border-color .25s ease; }