/* ============================================================================ * wlf-themes.css — One-click color schemes (modeled on top fitness apps). * The switcher flips and the whole product repaints. * Default = blue-white. Each block = brand hue + "skin" (surfaces + ink). * ========================================================================== */ :root{ --skin-on-brand:#ffffff; } /* legacy app tokens -> skin vars (loaded after app.css so these win) */ :root{ --bg:var(--skin-bg); --s1:var(--skin-surface); --s2:var(--skin-surface2); --s3:var(--skin-surface2); --bd:var(--skin-border); --bd2:var(--skin-border); --wh:var(--skin-ink); --mt:var(--skin-muted); --mt2:var(--skin-muted); --or:var(--wlf-brand); --ol:var(--wlf-brand-hot); --gld:var(--wlf-brand); } /* ---------- Blue / White — MyFitnessPal-style (DEFAULT, light) ---------- */ :root, html[data-wlf-theme="blue-white"]{ --wlf-brand:#2563EB;--wlf-brand-2:#1D4ED8;--wlf-brand-dark:#1E40AF;--wlf-brand-rose:#3B82F6; --wlf-brand-hot:#3B82F6;--wlf-brand-deep:#e9f1fb;--wlf-accent:#38BDF8;--wlf-accent-soft:#DBEAFE; --skin-bg:#f4f8ff;--skin-bg2:#eef4ff;--skin-surface:#ffffff;--skin-surface2:#f5f9ff; --skin-border:rgba(15,52,96,.16);--skin-ink:#0a1830;--skin-muted:#475569;--skin-on-brand:#ffffff; } /* ---------- Strava — Dark + Orange ---------- */ html[data-wlf-theme="strava-dark"]{ --wlf-brand:#FC4C02;--wlf-brand-2:#E34402;--wlf-brand-dark:#C23A02;--wlf-brand-rose:#FF6A33; --wlf-brand-hot:#FF6A33;--wlf-brand-deep:#1a0e06;--wlf-accent:#FF8A4C;--wlf-accent-soft:#3a1c0c; --skin-bg:#16130f;--skin-bg2:#1c1813;--skin-surface:#231d16;--skin-surface2:#2b241b; --skin-border:rgba(255,255,255,.10);--skin-ink:#f5efe8;--skin-muted:#c2b8ab;--skin-on-brand:#ffffff; } /* ---------- Nike / Peloton — Black + Red ---------- */ html[data-wlf-theme="black-red"]{ --wlf-brand:#E01E2D;--wlf-brand-2:#C2192A;--wlf-brand-dark:#9E1422;--wlf-brand-rose:#F0303F; --wlf-brand-hot:#F0303F;--wlf-brand-deep:#160608;--wlf-accent:#F0303F;--wlf-accent-soft:#2a0c0f; --skin-bg:#141013;--skin-bg2:#1a1418;--skin-surface:#201a1e;--skin-surface2:#282127; --skin-border:rgba(255,255,255,.11);--skin-ink:#f6eff2;--skin-muted:#c4b6bc;--skin-on-brand:#ffffff; } /* ---------- Fitbit — Teal + Dark ---------- */ html[data-wlf-theme="fitbit-teal"]{ --wlf-brand:#00B0B9;--wlf-brand-2:#009AA2;--wlf-brand-dark:#007E85;--wlf-brand-rose:#1ECBD4; --wlf-brand-hot:#1ECBD4;--wlf-brand-deep:#04201f;--wlf-accent:#4FE0E8;--wlf-accent-soft:#05322f; --skin-bg:#0f1719;--skin-bg2:#131e20;--skin-surface:#182426;--skin-surface2:#1f2e30; --skin-border:rgba(255,255,255,.10);--skin-ink:#eaf5f5;--skin-muted:#a8c3c3;--skin-on-brand:#04231f; } /* ---------- Headspace — Warm Orange + Soft Blue (light) ---------- */ html[data-wlf-theme="headspace-warm"]{ --wlf-brand:#F47D20;--wlf-brand-2:#E06A12;--wlf-brand-dark:#C25608;--wlf-brand-rose:#FF9A4D; --wlf-brand-hot:#FF9A4D;--wlf-brand-deep:#fff3e9;--wlf-accent:#4F9DDE;--wlf-accent-soft:#ffe9d6; --skin-bg:#fff8f1;--skin-bg2:#fff1e3;--skin-surface:#ffffff;--skin-surface2:#fff5ec; --skin-border:rgba(120,70,20,.16);--skin-ink:#2b1a0a;--skin-muted:#6e5640;--skin-on-brand:#ffffff; } /* ---------- Calm — Deep Navy / Indigo (dark) ---------- */ html[data-wlf-theme="calm-navy"]{ --wlf-brand:#6366F1;--wlf-brand-2:#4F46E5;--wlf-brand-dark:#4338CA;--wlf-brand-rose:#818CF8; --wlf-brand-hot:#818CF8;--wlf-brand-deep:#0b1020;--wlf-accent:#38BDF8;--wlf-accent-soft:#1e1b4b; --skin-bg:#12152b;--skin-bg2:#171b34;--skin-surface:#1e2342;--skin-surface2:#262c50; --skin-border:rgba(255,255,255,.11);--skin-ink:#edf0fb;--skin-muted:#b0b8dc;--skin-on-brand:#ffffff; } /* ---------- Green / White (light) ---------- */ html[data-wlf-theme="green-white"]{ --wlf-brand:#16a34a;--wlf-brand-2:#15803d;--wlf-brand-dark:#166534;--wlf-brand-rose:#22c55e; --wlf-brand-hot:#22c55e;--wlf-brand-deep:#eafaf0;--wlf-accent:#4ade80;--wlf-accent-soft:#dcfce7; --skin-bg:#f3fbf6;--skin-bg2:#e9f7ee;--skin-surface:#ffffff;--skin-surface2:#f1faf4; --skin-border:rgba(6,78,59,.16);--skin-ink:#052e16;--skin-muted:#3f6152;--skin-on-brand:#ffffff; } /* ---------- Apple Fitness — Black + Activity Neons (dark) ---------- */ html[data-wlf-theme="apple-dark"]{ --wlf-brand:#FA114F;--wlf-brand-2:#E10E45;--wlf-brand-dark:#B80B37;--wlf-brand-rose:#FF3D6E; --wlf-brand-hot:#92E82A;--wlf-brand-deep:#120206;--wlf-accent:#21E7E7;--wlf-accent-soft:#2a0a14; --skin-bg:#121316;--skin-bg2:#181a1e;--skin-surface:#1f2127;--skin-surface2:#272a31; --skin-border:rgba(255,255,255,.12);--skin-ink:#f4f5f7;--skin-muted:#b4b8c2;--skin-on-brand:#ffffff; } /* ---------- LIGHT: Orange / White ---------- */ html[data-wlf-theme="orange-white"]{ --wlf-brand:#ea580c;--wlf-brand-2:#c2410c;--wlf-brand-dark:#9a3412;--wlf-brand-rose:#f97316; --wlf-brand-hot:#f97316;--wlf-brand-deep:#fdeee2;--wlf-accent:#fb923c;--wlf-accent-soft:#ffedd5; --skin-bg:#fff8f3;--skin-bg2:#fff0e4;--skin-surface:#ffffff;--skin-surface2:#fff4ea; --skin-border:rgba(120,50,10,.16);--skin-ink:#2a1505;--skin-muted:#6b4f3a;--skin-on-brand:#ffffff; } /* ---------- LIGHT: Red / White ---------- */ html[data-wlf-theme="red-white"]{ --wlf-brand:#dc2626;--wlf-brand-2:#b91c1c;--wlf-brand-dark:#991b1b;--wlf-brand-rose:#ef4444; --wlf-brand-hot:#ef4444;--wlf-brand-deep:#fdeaea;--wlf-accent:#f87171;--wlf-accent-soft:#fee2e2; --skin-bg:#fff7f7;--skin-bg2:#ffeded;--skin-surface:#ffffff;--skin-surface2:#fff5f5; --skin-border:rgba(120,20,20,.16);--skin-ink:#2a0a0a;--skin-muted:#6b4a4a;--skin-on-brand:#ffffff; } /* ---------- LIGHT: Teal / White ---------- */ html[data-wlf-theme="teal-white"]{ --wlf-brand:#0d9488;--wlf-brand-2:#0f766e;--wlf-brand-dark:#115e59;--wlf-brand-rose:#14b8a6; --wlf-brand-hot:#14b8a6;--wlf-brand-deep:#e7faf6;--wlf-accent:#2dd4bf;--wlf-accent-soft:#ccfbf1; --skin-bg:#f2fbfa;--skin-bg2:#e6f7f4;--skin-surface:#ffffff;--skin-surface2:#effaf8; --skin-border:rgba(15,80,75,.16);--skin-ink:#042f2a;--skin-muted:#3f6360;--skin-on-brand:#ffffff; } /* ---------- LIGHT: Purple / White ---------- */ html[data-wlf-theme="purple-white"]{ --wlf-brand:#7c3aed;--wlf-brand-2:#6d28d9;--wlf-brand-dark:#5b21b6;--wlf-brand-rose:#8b5cf6; --wlf-brand-hot:#8b5cf6;--wlf-brand-deep:#f1ecfe;--wlf-accent:#a78bfa;--wlf-accent-soft:#ede9fe; --skin-bg:#faf7ff;--skin-bg2:#f3edff;--skin-surface:#ffffff;--skin-surface2:#f6f1ff; --skin-border:rgba(60,30,120,.16);--skin-ink:#1e1233;--skin-muted:#574a6b;--skin-on-brand:#ffffff; }