/* ======================================================================
   WHITE LABEL FITNESS — UNIVERSAL BUYER THEME SYSTEM (CORRECTED)
   Version: 2026-06-18 universal theme v3 (variable-safe, all 12 themes)

   WHAT CHANGED vs the 2026-06-17 build:
   - Every trailing "polish" rule now uses var(--wlf-*) instead of hardcoded
     hex. The old build hardcoded light-blue values on global selectors
     (body, p, buttons, modals...), which overrode the dark themes and left
     only calm-blue working. This file removes those leaks so black-red,
     black-gold, black-white, red-white, etc. all render correctly.
   - Theme-specific refinements are scoped to html[data-wlf-theme="..."].
   - This single file is intended to be shared (identical) across the
     website, app, and hub. Do not fork it per-project.

   CHANGE THE DEFAULT THEME:
   1) Open assets/js/wlf-theme-init.js
   2) Change DEFAULT_THEME = 'calm-blue' to one of the names below.

   LIVE PREVIEW:
   Add ?theme=black-red, ?theme=black-gold, etc. to any page URL.
   Example: /index.html?theme=black-red
   ====================================================================== */

/* ----------------------------------------------------------------------
   1) PALETTES — the single source of truth for color. Edit here only.
   ---------------------------------------------------------------------- */
:root,
html[data-wlf-theme="calm-blue"]{
  --wlf-theme-name:'Calm Blue / White';
  --wlf-page:#f7fbff;
  --wlf-page-2:#f0f6ff;
  --wlf-surface:#ffffff;
  --wlf-surface-2:#fbfdff;
  --wlf-surface-3:#edf5ff;
  --wlf-card:#ffffff;
  --wlf-card-soft:#f5f9ff;
  --wlf-text:#071b4a;
  --wlf-text-2:#102858;
  --wlf-muted:#3a4d66;
  --wlf-muted-2:#546881;
  --wlf-border:#bcd6ff;
  --wlf-border-2:#dceaff;
  --wlf-brand:#2b65c8;
  --wlf-brand-2:#1f4f9f;
  --wlf-brand-soft:#e4efff;
  --wlf-brand-wash:#f0f6ff;
  --wlf-accent:#2b65c8;
  --wlf-on-brand:#ffffff;
  --wlf-good:#2b65c8;
  --wlf-warning:#2b65c8;
  --wlf-shadow:0 18px 50px rgba(30,64,175,.11);
  --wlf-shadow-soft:0 10px 28px rgba(30,64,175,.08);
  --wlf-radius:22px;
  --wlf-radius-sm:14px;
  --wlf-font-body:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --wlf-font-heading:"Barlow Condensed", Inter, Arial, sans-serif;

  /* legacy variable bridge — old pages used these names */
  --or:var(--wlf-brand); --ol:var(--wlf-brand-2); --og:rgba(43,101,200,.18);
  --wh:var(--wlf-text); --mt:var(--wlf-muted); --mt2:var(--wlf-muted-2);
  --s1:var(--wlf-surface); --s2:var(--wlf-surface-2); --s3:var(--wlf-surface-3);
  --bg:var(--wlf-page); --card:var(--wlf-card); --line:var(--wlf-border);
  --red:var(--wlf-brand); --accent:var(--wlf-brand); --blue:var(--wlf-brand);
  --bpf-bg:var(--wlf-page); --bpf-bg-2:var(--wlf-page-2); --bpf-panel:var(--wlf-card);
  --bpf-panel-2:var(--wlf-card-soft); --bpf-red:var(--wlf-brand); --bpf-red-hot:var(--wlf-brand-2);
  --bpf-red-deep:var(--wlf-brand-wash); --bpf-lime:var(--wlf-brand); --bpf-white:var(--wlf-text);
  --bpf-muted:var(--wlf-muted); --bpf-soft:var(--wlf-muted-2); --bpf-border:var(--wlf-border);
}

html[data-wlf-theme="pro-blue"]{--wlf-page:#f7fbff;--wlf-page-2:#eaf3ff;--wlf-surface:#fff;--wlf-surface-2:#f4f9ff;--wlf-surface-3:#eaf3ff;--wlf-card:#fff;--wlf-card-soft:#f1f7ff;--wlf-text:#071b4a;--wlf-text-2:#102a5c;--wlf-muted:#3c4f68;--wlf-muted-2:#54688a;--wlf-border:#bfdbfe;--wlf-border-2:#dbeafe;--wlf-brand:#2563eb;--wlf-brand-2:#1d4ed8;--wlf-brand-soft:#dbeafe;--wlf-brand-wash:#eff6ff;--wlf-accent:#2563eb;--wlf-on-brand:#fff;--wlf-good:#2563eb;--wlf-warning:#2563eb;--wlf-shadow:0 18px 50px rgba(37,99,235,.12);--wlf-shadow-soft:0 10px 28px rgba(37,99,235,.08)}
html[data-wlf-theme="steel-blue"]{--wlf-page:#f5f8fb;--wlf-page-2:#e7eff6;--wlf-surface:#fff;--wlf-surface-2:#f8fbfd;--wlf-surface-3:#edf4f8;--wlf-card:#fff;--wlf-card-soft:#f3f8fb;--wlf-text:#0a2437;--wlf-text-2:#15384e;--wlf-muted:#42596b;--wlf-muted-2:#5d7283;--wlf-border:#c7d7e3;--wlf-border-2:#dbe6ee;--wlf-brand:#2f6f8f;--wlf-brand-2:#24566f;--wlf-brand-soft:#dbeaf2;--wlf-brand-wash:#eef6fa;--wlf-accent:#2f6f8f;--wlf-on-brand:#fff;--wlf-good:#2f6f8f;--wlf-warning:#2f6f8f;--wlf-shadow:0 18px 50px rgba(47,111,143,.12);--wlf-shadow-soft:0 10px 28px rgba(47,111,143,.08)}
html[data-wlf-theme="navy-sky"]{--wlf-page:#f5f9ff;--wlf-page-2:#eaf4ff;--wlf-surface:#fff;--wlf-surface-2:#f7fbff;--wlf-surface-3:#eaf4ff;--wlf-card:#fff;--wlf-card-soft:#f1f7ff;--wlf-text:#071426;--wlf-text-2:#0f2746;--wlf-muted:#3f5468;--wlf-muted-2:#5c7185;--wlf-border:#bdd7f4;--wlf-border-2:#dcecff;--wlf-brand:#0f3460;--wlf-brand-2:#0b2545;--wlf-brand-soft:#dbeafe;--wlf-brand-wash:#eff6ff;--wlf-accent:#3b82f6;--wlf-on-brand:#fff;--wlf-good:#0f3460;--wlf-warning:#0f3460;--wlf-shadow:0 18px 50px rgba(15,52,96,.13);--wlf-shadow-soft:0 10px 28px rgba(15,52,96,.08)}
html[data-wlf-theme="ocean-blue"]{--wlf-page:#f2fbfd;--wlf-page-2:#e6f7fb;--wlf-surface:#fff;--wlf-surface-2:#f6fcfd;--wlf-surface-3:#e7f8fb;--wlf-card:#fff;--wlf-card-soft:#effafd;--wlf-text:#062334;--wlf-text-2:#0a3a50;--wlf-muted:#3f5d69;--wlf-muted-2:#5d7682;--wlf-border:#b7e1ea;--wlf-border-2:#d6f1f6;--wlf-brand:#0e7490;--wlf-brand-2:#155e75;--wlf-brand-soft:#cffafe;--wlf-brand-wash:#ecfeff;--wlf-accent:#0891b2;--wlf-on-brand:#fff;--wlf-good:#0e7490;--wlf-warning:#0e7490;--wlf-shadow:0 18px 50px rgba(14,116,144,.12);--wlf-shadow-soft:0 10px 28px rgba(14,116,144,.08)}
html[data-wlf-theme="indigo-blue"]{--wlf-page:#f8f8ff;--wlf-page-2:#eef2ff;--wlf-surface:#fff;--wlf-surface-2:#fafaff;--wlf-surface-3:#eef2ff;--wlf-card:#fff;--wlf-card-soft:#f4f5ff;--wlf-text:#12163c;--wlf-text-2:#1e2661;--wlf-muted:#454b69;--wlf-muted-2:#606586;--wlf-border:#c7d2fe;--wlf-border-2:#e0e7ff;--wlf-brand:#4f46e5;--wlf-brand-2:#4338ca;--wlf-brand-soft:#e0e7ff;--wlf-brand-wash:#eef2ff;--wlf-accent:#4f46e5;--wlf-on-brand:#fff;--wlf-good:#4f46e5;--wlf-warning:#4f46e5;--wlf-shadow:0 18px 50px rgba(79,70,229,.12);--wlf-shadow-soft:0 10px 28px rgba(79,70,229,.08)}

/* High-energy options for buyers who want more aggressive fitness branding. */
html[data-wlf-theme="black-red"]{--wlf-page:#050608;--wlf-page-2:#0b0d11;--wlf-surface:#0e1117;--wlf-surface-2:#151922;--wlf-surface-3:#1c2230;--wlf-card:#0f1218;--wlf-card-soft:#171c26;--wlf-text:#f8fafc;--wlf-text-2:#f1f5f9;--wlf-muted:#b3bdcc;--wlf-muted-2:#94a0b2;--wlf-border:#2a3343;--wlf-border-2:#202838;--wlf-brand:#e11d48;--wlf-brand-2:#be123c;--wlf-brand-soft:#3c111c;--wlf-brand-wash:#16080d;--wlf-accent:#f43f5e;--wlf-on-brand:#fff;--wlf-good:#e11d48;--wlf-warning:#e11d48;--wlf-shadow:0 18px 50px rgba(0,0,0,.38);--wlf-shadow-soft:0 10px 28px rgba(0,0,0,.28)}
html[data-wlf-theme="black-gold"]{--wlf-page:#050505;--wlf-page-2:#0c0c0a;--wlf-surface:#11110f;--wlf-surface-2:#171711;--wlf-surface-3:#202018;--wlf-card:#10100e;--wlf-card-soft:#181812;--wlf-text:#fafaf7;--wlf-text-2:#f4f0dc;--wlf-muted:#c2bba6;--wlf-muted-2:#9d957f;--wlf-border:#36311e;--wlf-border-2:#272312;--wlf-brand:#d4af37;--wlf-brand-2:#b98914;--wlf-brand-soft:#30280e;--wlf-brand-wash:#181306;--wlf-accent:#f4d36b;--wlf-on-brand:#090909;--wlf-good:#d4af37;--wlf-warning:#d4af37;--wlf-shadow:0 18px 50px rgba(0,0,0,.42);--wlf-shadow-soft:0 10px 28px rgba(0,0,0,.28)}
html[data-wlf-theme="black-white"]{--wlf-page:#050505;--wlf-page-2:#0a0a0a;--wlf-surface:#111111;--wlf-surface-2:#171717;--wlf-surface-3:#202020;--wlf-card:#101010;--wlf-card-soft:#181818;--wlf-text:#ffffff;--wlf-text-2:#f3f4f6;--wlf-muted:#cbced4;--wlf-muted-2:#a3aab4;--wlf-border:#343434;--wlf-border-2:#252525;--wlf-brand:#ffffff;--wlf-brand-2:#e5e7eb;--wlf-brand-soft:#222222;--wlf-brand-wash:#111111;--wlf-accent:#ffffff;--wlf-on-brand:#090909;--wlf-good:#ffffff;--wlf-warning:#ffffff;--wlf-shadow:0 18px 50px rgba(0,0,0,.42);--wlf-shadow-soft:0 10px 28px rgba(0,0,0,.28)}
html[data-wlf-theme="red-white"]{--wlf-page:#fff7f7;--wlf-page-2:#fff0f0;--wlf-surface:#ffffff;--wlf-surface-2:#fffafa;--wlf-surface-3:#fff1f2;--wlf-card:#ffffff;--wlf-card-soft:#fff5f6;--wlf-text:#25080b;--wlf-text-2:#441015;--wlf-muted:#5a474a;--wlf-muted-2:#72595c;--wlf-border:#fecdd3;--wlf-border-2:#ffe4e6;--wlf-brand:#dc2626;--wlf-brand-2:#b91c1c;--wlf-brand-soft:#fee2e2;--wlf-brand-wash:#fff1f2;--wlf-accent:#dc2626;--wlf-on-brand:#fff;--wlf-good:#dc2626;--wlf-warning:#dc2626;--wlf-shadow:0 18px 50px rgba(220,38,38,.10);--wlf-shadow-soft:0 10px 28px rgba(220,38,38,.07)}
html[data-wlf-theme="graphite-blue"]{--wlf-page:#f4f6f9;--wlf-page-2:#e9eef5;--wlf-surface:#ffffff;--wlf-surface-2:#f8fafc;--wlf-surface-3:#eef3f8;--wlf-card:#ffffff;--wlf-card-soft:#f4f7fb;--wlf-text:#101827;--wlf-text-2:#1e293b;--wlf-muted:#42526b;--wlf-muted-2:#5d6e85;--wlf-border:#cbd5e1;--wlf-border-2:#e2e8f0;--wlf-brand:#1e40af;--wlf-brand-2:#172554;--wlf-brand-soft:#dbeafe;--wlf-brand-wash:#eff6ff;--wlf-accent:#2563eb;--wlf-on-brand:#fff;--wlf-good:#1e40af;--wlf-warning:#1e40af;--wlf-shadow:0 18px 50px rgba(15,23,42,.10);--wlf-shadow-soft:0 10px 28px rgba(15,23,42,.08)}
html[data-wlf-theme="white-black"]{--wlf-page:#fafafa;--wlf-page-2:#f4f4f5;--wlf-surface:#ffffff;--wlf-surface-2:#fbfbfb;--wlf-surface-3:#f4f4f5;--wlf-card:#ffffff;--wlf-card-soft:#f7f7f8;--wlf-text:#09090b;--wlf-text-2:#18181b;--wlf-muted:#46464d;--wlf-muted-2:#63636b;--wlf-border:#d4d4d8;--wlf-border-2:#e4e4e7;--wlf-brand:#111827;--wlf-brand-2:#000000;--wlf-brand-soft:#e5e7eb;--wlf-brand-wash:#f4f4f5;--wlf-accent:#111827;--wlf-on-brand:#ffffff;--wlf-good:#111827;--wlf-warning:#111827;--wlf-shadow:0 18px 50px rgba(24,24,27,.09);--wlf-shadow-soft:0 10px 28px rgba(24,24,27,.06)}

/* ----------------------------------------------------------------------
   2) GLOBAL SHELL — all values via variables, so every theme adapts.
   ---------------------------------------------------------------------- */
html{background:var(--wlf-page)!important;color:var(--wlf-text)!important;}
body{
  background:linear-gradient(180deg,var(--wlf-page) 0%, var(--wlf-surface-2) 52%, var(--wlf-page) 100%)!important;
  color:var(--wlf-text)!important;
  font-family:var(--wlf-font-body)!important;
  font-size:16px!important;
  line-height:1.55!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body,input,textarea,select,button{font-family:var(--wlf-font-body)!important;}
body *{text-shadow:none!important;}

/* Tone down oversaturated hero/CTA blocks for the light themes only. */
html:not([data-wlf-theme^="black"]) .hero,
html:not([data-wlf-theme^="black"]) .hero-card,
html:not([data-wlf-theme^="black"]) .cta-section,
html:not([data-wlf-theme^="black"]) .apply-section,
html:not([data-wlf-theme^="black"]) .application-section,
html:not([data-wlf-theme^="black"]) .downloads,
html:not([data-wlf-theme^="black"]) .guide-card,
html:not([data-wlf-theme^="black"]) .program-card,
html:not([data-wlf-theme^="black"]) .workout-card,
html:not([data-wlf-theme^="black"]) .feature-card,
html:not([data-wlf-theme^="black"]) .pricing-card,
html:not([data-wlf-theme^="black"]) .plan-card,
html:not([data-wlf-theme^="black"]) .app-card,
html:not([data-wlf-theme^="black"]) .dashboard-card,
html:not([data-wlf-theme^="black"]) .coach-card,
html:not([data-wlf-theme^="black"]) .bpf-home-access-offer,
html:not([data-wlf-theme^="black"]) .app-home-card,
html:not([data-wlf-theme^="black"]) .save-result-card,
html:not([data-wlf-theme^="black"]) .snapshot-summary,
html:not([data-wlf-theme^="black"]) .plan-score-card,
html:not([data-wlf-theme^="black"]) .portal-command-card,
html:not([data-wlf-theme^="black"]) .today-focus-card,
html:not([data-wlf-theme^="black"]) .guided-prompts{
  background:linear-gradient(180deg,var(--wlf-surface) 0%, var(--wlf-surface-2) 100%)!important;
  color:var(--wlf-text)!important;
  border-color:var(--wlf-border)!important;
  box-shadow:var(--wlf-shadow-soft)!important;
}

/* Generic layout / shell polish */
.container,.wrap,.shell,.page-shell,.app-shell,.phone-shell,.mobile-shell,.portal-shell,.screen,.main,.main-wrap,main,
.content,.content-wrap,.site-shell,.client-shell,.hub-shell{
  max-width:min(100%,1180px);
}
.phone-shell,.mobile-shell,.app-shell,.client-shell,.portal-shell,.hub-shell,.screen{
  margin-left:auto!important;
  margin-right:auto!important;
  background:var(--wlf-surface-2)!important;
  color:var(--wlf-text)!important;
  border-color:var(--wlf-border)!important;
}

.card,.tile,.panel,.module,.box,.section,.feature,.feature-tile,.feature-card,.program-card,.pricing-card,.guide-card,.download-card,
.hub-card,.client-card,.tool-card,.resource-card,.quick-card,.question-card,.coach-panel,.coach-card,.ai-card,.input-card,.metric-card,
.summary-section,.meal-cat,.targets-box,.search-box,.bpf-food-flow,.coaching-cta,.app-home-card,.bpf-today-actions,.bpf-storefront,
[class*="card"],[class*="tile"],[class*="panel"]{
  background:var(--wlf-card)!important;
  border-color:var(--wlf-border)!important;
  color:var(--wlf-text)!important;
}
.main,main{background:transparent!important;}

/* ----------------------------------------------------------------------
   3) TYPOGRAPHY — readable hierarchy, all via variables.
   ---------------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6,.headline,.title,.section-title,.hero-title,.app-home-title,.portal-command-title,
.today-focus-title,.native-section-title,.save-result-title,.score-title,.page-title,.card-title,.panel-title,
.bpf-store-title,.bpf-age-t,.bpf-snack-t,.bpf-card-title{
  color:var(--wlf-text)!important;
  -webkit-text-fill-color:var(--wlf-text)!important;
  letter-spacing:-.01em!important;
}
p,li,span,small,label,em,.copy,.sub,.subcopy,.muted,.description,.subtitle,.body-copy,.desc,.meta,.help-text,
.app-home-sub,.portal-command-copy,.today-focus-sub,.save-result-copy,.score-sub,.ex-meta,
.bpf-age-d,.bpf-snack-d,.bpf-card-copy,.bpf-today-sub{
  color:var(--wlf-muted)!important;
  -webkit-text-fill-color:var(--wlf-muted)!important;
}
strong,b{color:var(--wlf-text)!important;-webkit-text-fill-color:var(--wlf-text)!important;}
.kicker,.eyebrow,.label,.badge,.pill,.tag,.chip,.day,.app-home-kicker{
  color:var(--wlf-brand-2)!important;
  -webkit-text-fill-color:var(--wlf-brand-2)!important;
}

/* Links */
a{color:var(--wlf-brand-2)!important;}
a:hover{color:var(--wlf-brand)!important;}

/* ----------------------------------------------------------------------
   4) BUTTONS — readable, theme-driven fill.
   ---------------------------------------------------------------------- */
button,.btn,.button,a.btn,a.button,[role="button"],input[type="button"],input[type="submit"],.cta,.cta-button,
.primary,.primary-btn,.lead-btn,.app-primary-action,.app-secondary-action,.app-video-action,.empty-cta,.push-btn,
.bpf-btn,.to-app,.bottom-nav a,.bottom-nav button,.tray a,.tray button,.nav-btn,.nav-pill,.quick-question,.topic-chip,
.bpf-age-btn,.bpf-snack-btn,.bpf-today-btn,.bpf-store-btn,.recovery-chip,.bpf-food-flow-btn,.macro-calc-link,
.portion-confirm,.meal-cat-add{
  min-height:44px!important;
  border-radius:14px!important;
  font-family:var(--wlf-font-body)!important;
  font-weight:800!important;
  letter-spacing:.01em!important;
  text-transform:none!important;
  text-decoration:none!important;
  line-height:1.15!important;
  border-color:var(--wlf-border)!important;
}
/* Primary fill */
button:not(.ghost):not(.secondary):not(.outline):not(.nav-btn):not(.nav-pill):not(.topic-chip):not(.quick-question),
.btn.primary,.button.primary,a.btn.primary,a.button.primary,.primary-btn,.lead-btn,.cta-button,.app-primary-action,
.bpf-store-btn.primary,.bpf-today-btn.primary,.bpf-final-cta-button,.bpf-snack-btn,.bpf-age-btn:not(.secondary),
.portion-confirm,.meal-cat-add,.bpf-food-flow-btn.primary,.macro-calc-link,input[type="submit"]{
  background:linear-gradient(180deg,var(--wlf-brand) 0%,var(--wlf-brand-2) 100%)!important;
  color:var(--wlf-on-brand)!important;
  -webkit-text-fill-color:var(--wlf-on-brand)!important;
  border-color:var(--wlf-brand-2)!important;
  box-shadow:var(--wlf-shadow-soft)!important;
}
button:not(.ghost):not(.secondary):not(.outline):not(.nav-btn):not(.nav-pill):not(.topic-chip):not(.quick-question) *,
.btn.primary *,.button.primary *,.primary-btn *,.lead-btn *,.cta-button *,.app-primary-action *,
.bpf-snack-btn *,.bpf-age-btn:not(.secondary) *{
  color:var(--wlf-on-brand)!important;
  -webkit-text-fill-color:var(--wlf-on-brand)!important;
}
/* Secondary / ghost */
.ghost,.secondary,.outline,.nav-btn,.nav-pill,.topic-chip,.quick-question,.app-secondary-action,.app-video-action,.empty-cta,
.tray a,.tray button,.bottom-nav a,.bottom-nav button,.bpf-age-btn.secondary,.bpf-today-btn.ghost,
.btn.secondary,.btn.ghost,a.btn.secondary,a.btn.ghost,.portion-cancel,.bpf-food-flow-btn:not(.primary){
  background:var(--wlf-brand-wash)!important;
  color:var(--wlf-text)!important;
  -webkit-text-fill-color:var(--wlf-text)!important;
  border:1px solid var(--wlf-border)!important;
  box-shadow:none!important;
}
.ghost *,.secondary *,.outline *,.nav-btn *,.nav-pill *,.topic-chip *,.quick-question *,.app-secondary-action *,.app-video-action *,
.tray a *,.tray button *,.bottom-nav a *,.bottom-nav button *{
  color:var(--wlf-text)!important;
  -webkit-text-fill-color:var(--wlf-text)!important;
}

/* ----------------------------------------------------------------------
   5) HEADER / NAV — light vs black handled by theme prefix only.
   ---------------------------------------------------------------------- */
header,.header,.topbar,.nav,.navbar,.app-header,.hub-header,.site-header,.page-header{
  background:color-mix(in srgb,var(--wlf-surface) 94%, transparent)!important;
  color:var(--wlf-text)!important;
  border-color:var(--wlf-border-2)!important;
  box-shadow:var(--wlf-shadow-soft)!important;
  backdrop-filter:blur(16px);
}

/* Bottom nav */
.bpf-global-bottom-nav,.tray,.bottom-nav,.mobile-nav,.tabbar,.tabs-bottom{
  background:color-mix(in srgb,var(--wlf-surface) 96%, transparent)!important;
  color:var(--wlf-text)!important;
  border:1px solid var(--wlf-border)!important;
  box-shadow:var(--wlf-shadow)!important;
}
.bpf-global-bottom-nav a,.tray a,.bottom-nav a,.mobile-nav a,.tabbar a{
  color:var(--wlf-muted)!important;
  -webkit-text-fill-color:var(--wlf-muted)!important;
}
.bpf-global-bottom-nav a.active,.tray .active,.bottom-nav .active,.mobile-nav .active,.tabbar .active{
  background:var(--wlf-brand-soft)!important;
  color:var(--wlf-brand-2)!important;
  -webkit-text-fill-color:var(--wlf-brand-2)!important;
  border-color:var(--wlf-brand)!important;
}

/* ----------------------------------------------------------------------
   6) FORM FIELDS
   ---------------------------------------------------------------------- */
input,textarea,select,.input,.textarea,.field{
  background:var(--wlf-surface)!important;
  color:var(--wlf-text)!important;
  -webkit-text-fill-color:var(--wlf-text)!important;
  border:1px solid var(--wlf-border)!important;
  border-radius:16px!important;
}
input::placeholder,textarea::placeholder{color:var(--wlf-muted-2)!important;-webkit-text-fill-color:var(--wlf-muted-2)!important;}
input:focus,textarea:focus,select:focus{
  outline:3px solid color-mix(in srgb,var(--wlf-brand) 24%, transparent)!important;
  border-color:var(--wlf-brand)!important;
}

/* ----------------------------------------------------------------------
   7) SUB-PANELS, RESULTS, BADGES
   ---------------------------------------------------------------------- */
.qstat,.detail-box,.ex-row,.result-item,.food-item,.search-result,.targets-box,.portion-box,
.bpf-direct-step,.bpf-auto-progress>*,.bpf-life-pillars>div{
  background:var(--wlf-surface-3)!important;
  border:1px solid var(--wlf-border-2)!important;
  color:var(--wlf-text)!important;
  -webkit-text-fill-color:var(--wlf-text)!important;
}
.food-name,.result-name,.ex-name,.qstat-val,.meal-cat-name,.targets-box-title,.num{color:var(--wlf-text)!important;-webkit-text-fill-color:var(--wlf-text)!important;}
.food-portion,.food-macros,.result-meta,.result-macros,.qstat-lbl,.meal-cat-cals,.ex-meta{color:var(--wlf-muted)!important;-webkit-text-fill-color:var(--wlf-muted)!important;}

.badge,.pill,.chip,.tag,.status,.status-pill,.number-badge,.app-status-pill,.app-status-dot,
[class*="badge"],[class*="pill"],[class*="chip"],[class*="tag"]{
  background:var(--wlf-brand-wash)!important;
  color:var(--wlf-brand-2)!important;
  -webkit-text-fill-color:var(--wlf-brand-2)!important;
  border-color:var(--wlf-border)!important;
}
.number-badge,.step-number,.count-badge{background:var(--wlf-brand)!important;color:var(--wlf-on-brand)!important;-webkit-text-fill-color:var(--wlf-on-brand)!important;}

/* ----------------------------------------------------------------------
   8) MODALS / SHEETS / DRAWERS — surfaces via variables.
   ---------------------------------------------------------------------- */
.modal.show,.modal{background:rgba(8,12,24,.46)!important;backdrop-filter:blur(8px)!important;}
.modal .sheet,.sheet,.workout-modal,.modal-content,.dialog,.drawer,.targets-box,.portion-box,.search-box{
  background:var(--wlf-surface)!important;
  color:var(--wlf-text)!important;
  -webkit-text-fill-color:var(--wlf-text)!important;
  border:1px solid var(--wlf-border)!important;
  box-shadow:0 24px 80px rgba(8,12,24,.28)!important;
}
.modal .sheet h1,.modal .sheet h2,.modal .sheet h3,.modal .sheet strong,.modal .sheet b,
.sheet h1,.sheet h2,.sheet h3,.sheet strong,.sheet b{color:var(--wlf-text)!important;-webkit-text-fill-color:var(--wlf-text)!important;}
.modal .sheet p,.modal .sheet span,.modal .sheet small,.modal .sheet li,
.sheet p,.sheet span,.sheet small,.sheet li{color:var(--wlf-muted)!important;-webkit-text-fill-color:var(--wlf-muted)!important;}
.sheet-actions{background:linear-gradient(180deg,color-mix(in srgb,var(--wlf-surface) 0%, transparent),var(--wlf-surface) 30%)!important;}
.close,.modal .close{background:var(--wlf-brand)!important;color:var(--wlf-on-brand)!important;-webkit-text-fill-color:var(--wlf-on-brand)!important;border-color:var(--wlf-brand)!important;}

/* Exercise art always sits on a clean surface regardless of theme. */
.exerciseArt,.cardMedia img,.detailImg img,.ex-thumb,#activeImg,#nextImg{object-fit:contain!important;background:var(--wlf-surface)!important;}

/* Hide leftover next-action card from legacy builds. */
#bpf-next-action-card{display:none!important;}
html:not(.bpf-embed-mode) body,html:not(.bpf-embed-mode) .shell,html:not(.bpf-embed-mode) .main{height:auto!important;max-height:none!important;overflow:visible!important;}

/* ----------------------------------------------------------------------
   9) LEGACY INLINE-COLOR NEUTRALISER
   Old pages have inline background/colors baked in. Re-map them to the
   active theme on LIGHT themes only (so dark themes keep their own look).
   ---------------------------------------------------------------------- */
html:not([data-wlf-theme^="black"]) [style*="background:#2563EB" i],
html:not([data-wlf-theme^="black"]) [style*="background: #2563EB" i],
html:not([data-wlf-theme^="black"]) [style*="background:#1D4ED8" i],
html:not([data-wlf-theme^="black"]) [style*="background: #1D4ED8" i],
html:not([data-wlf-theme^="black"]) [style*="background:blue" i],
html:not([data-wlf-theme^="black"]) [style*="background: blue" i],
html:not([data-wlf-theme^="black"]) [style*="background-color:#2563EB" i],
html:not([data-wlf-theme^="black"]) [style*="background-color: #2563EB" i]{
  background:linear-gradient(180deg,var(--wlf-surface) 0%,var(--wlf-brand-wash) 100%)!important;
  color:var(--wlf-text)!important;
  -webkit-text-fill-color:var(--wlf-text)!important;
  border-color:var(--wlf-border)!important;
}
/* Inline white text becomes readable on light themes. */
html:not([data-wlf-theme^="black"]) [style*="color:#fff" i],
html:not([data-wlf-theme^="black"]) [style*="color: #fff" i],
html:not([data-wlf-theme^="black"]) [style*="color:white" i]{
  color:var(--wlf-text)!important;-webkit-text-fill-color:var(--wlf-text)!important;
}

/* ----------------------------------------------------------------------
   10) RESPONSIVE POLISH (over-40 friendly sizing)
   ---------------------------------------------------------------------- */
@media (max-width: 720px){
  body{font-size:17px!important;}
  h1,.hero-title{font-size:clamp(34px,10vw,56px)!important;line-height:.98!important;}
  h2{font-size:clamp(28px,8vw,44px)!important;line-height:1.02!important;}
  p,li,.copy,.description{font-size:16px!important;line-height:1.6!important;}
  button,.btn,.button,a.btn,a.button,[role="button"]{min-height:48px!important;padding:13px 18px!important;}
}

/* Optional accessibility hook: add class "wlf-large-text" to <html> for a
   bigger-type mode aimed at older clients. */
html.wlf-large-text{font-size:18px;}
html.wlf-large-text body{font-size:18px!important;line-height:1.65!important;}
html.wlf-large-text p,html.wlf-large-text li,html.wlf-large-text .copy{font-size:18px!important;}
html.wlf-large-text button,html.wlf-large-text .btn,html.wlf-large-text .button{min-height:52px!important;}

/* ======================================================================
   WLF READABILITY HOTFIX — 2026-06-19
   Kills faded gradient-clipped text and forces solid, readable color on
   all headings, titles, and exercise names across every theme.
   ====================================================================== */
h1,h2,h3,h4,h5,h6,
.big-name,#title,#activeName,#nextName,#nextName,
.exercise-title,.ex-name,.exercise-name,.next-name,.now-name,
.hero h1,.hero-title,.page-title,.section-title,.card-title,.panel-title,.headline,
.ans-name,.answer-card .ans-name,.wlf-real-ai-name,
[class*="-title"],[class*="title-"],[class*="-name"]{
  -webkit-text-fill-color:var(--wlf-text)!important;
  color:var(--wlf-text)!important;
  background:none!important;
  background-image:none!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
  opacity:1!important;
  text-shadow:none!important;
}
/* Accent/highlight words keep a readable brand color (not faded). */
.hl,.brand-accent,.eyebrow,.kicker,.badge,.day,
[class*="kicker"],[class*="eyebrow"]{
  -webkit-text-fill-color:var(--wlf-brand-2)!important;
  color:var(--wlf-brand-2)!important;
  background-image:none!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
  opacity:1!important;
}
/* Body copy: never washed out or transparent. */
p,li,span,small,label,.copy,.sub,.subcopy,.lead,.desc,.description,.meta,.ex-meta,
.bpf-answer-point,.ans-body,.card-copy,.feature-copy{
  opacity:1!important;
  -webkit-text-fill-color:initial;
}
p,li,.lead,.copy,.desc,.description,.sub,.subcopy{
  color:var(--wlf-muted)!important;
}
/* Slightly stronger weight for small body text aids 40+ readability. */
body{ -webkit-font-smoothing:antialiased; }
p,li{ font-weight:450; }