/* ============================================================================
 * wlf-skin.css — paints surfaces/text/buttons from the active theme's skin
 * variables. Loads after wlf-themes.css. Var-driven, so switching theme
 * repaints everything (light or dark) with no per-theme rules here.
 * ========================================================================== */
html,body{background:var(--skin-bg)!important;color:var(--skin-ink)!important;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}

/* Surfaces: cards / panels / modals / sections */
body :is(.card,.panel,.modal,.sheet,.shell,.topbar,.answer-card,.program-result,.macro-result,.meal-plan-result,
  .setting-row,.testi,.metric-card,.log-entry,.prog-day,.prog-card,.photo-card,.gen-form-card,.coach-banner,
  [class*="-card"],[class*="card-"],[class*="-panel"],[class*="-box"],[class*="banner"],[class*="-result"],
  [class*="-hero"],[class*="tile"],[class*="-tray"]){
  background:var(--skin-surface)!important;border-color:var(--skin-border)!important;
}
body :is(.s2,.surface-2,[class*="-soft"],[class*="subtle"]){ background:var(--skin-surface2)!important; }

/* Text: strong, readable in any theme */
body :is(p,li,span,small,em,b,strong,label,dt,dd,td,th,figcaption,blockquote,h1,h2,h3,h4,h5,h6,
  .title,[class*="title"],[class*="-name"],[class*="-text"],[class*="-label"],.copy,.lead,.eyebrow,.kicker){
  color:var(--skin-ink)!important;-webkit-text-fill-color:var(--skin-ink)!important;opacity:1!important;text-shadow:none!important;
}
body :is(.muted,.sub,.desc,.meta,small,[class*="-sub"],[class*="-desc"],[class*="-meta"],[class*="muted"],[class*="caption"]){
  color:var(--skin-muted)!important;-webkit-text-fill-color:var(--skin-muted)!important;
}
a{color:var(--wlf-brand);}

/* Inputs */
input,textarea,select,.email-in,.lead-input,.modal-input{
  background:var(--skin-surface)!important;color:var(--skin-ink)!important;-webkit-text-fill-color:var(--skin-ink)!important;border:1px solid var(--skin-border)!important;}
input::placeholder,textarea::placeholder{color:var(--skin-muted)!important;-webkit-text-fill-color:var(--skin-muted)!important;}

/* Floating cards that hardcoded a background */
.rest-timer-wrap,.streak-modal-card{background:var(--skin-surface)!important;border:1px solid var(--skin-border)!important;}
.rest-timer-wrap *,.streak-modal-card *{color:var(--skin-ink)!important;-webkit-text-fill-color:var(--skin-ink)!important;}

/* Filled brand controls -> brand bg + on-brand text */
body :is(button.primary,a.primary,.btn-primary,.btn.primary,.cta,.cta-btn,.btn-or,.ask-btn,.cb-pri,.akd-btn,
  .save-btn,.modal-submit,.notify-btn,.upsell-btn,.start-free,.start-btn,.load-player,.download-button,
  .email-sub,.streak-modal-pri,.photo-reveal-btn,.prog-cta,.gen-btn,.lead-btn,.akd-venmo-btn,.akd-paid-btn,
  [class*="-cta"],[class*="cta-"]){
  background:var(--wlf-brand)!important;border-color:var(--wlf-brand)!important;color:var(--skin-on-brand)!important;
}
body :is(button.primary,.btn.primary,.cta,.cta-btn,.btn-or,.ask-btn,.cb-pri,.akd-btn,.prog-cta,.save-btn,
  .modal-submit,.notify-btn,.upsell-btn,.email-sub,.streak-modal-pri) *{
  color:var(--skin-on-brand)!important;-webkit-text-fill-color:var(--skin-on-brand)!important;
}

/* Bottom nav */
[id*="bottom-nav"],.bottom-nav,.bpf-bottom-nav,.bot-nav{background:var(--skin-surface)!important;border:1px solid var(--skin-border)!important;}
[id*="bottom-nav"] a,.bottom-nav a,.bpf-bottom-nav a{color:var(--skin-muted)!important;-webkit-text-fill-color:var(--skin-muted)!important;}
[id*="bottom-nav"] a.active,.bottom-nav a.active,[id*="bottom-nav"] a[aria-current="page"]{color:var(--wlf-brand)!important;-webkit-text-fill-color:var(--wlf-brand)!important;}

/* Light themes: secondary/link/accent text must stay readable (use deeper brand) */
html:is([data-wlf-theme="blue-white"],[data-wlf-theme="green-white"],[data-wlf-theme="headspace-warm"]) :is(a,.cb-sec,.back-site-btn,.secondary,.bpf-store-btn.secondary,.bpf-age-btn.secondary,[class*="see-all"],[class*="-link"],.yt-see-all){
  color:var(--wlf-brand-2)!important;-webkit-text-fill-color:var(--wlf-brand-2)!important;
}
/* …but filled brand buttons keep on-brand text (declared after, wins) */
html :is(button.primary,.btn.primary,.cta,.cta-btn,.btn-or,.ask-btn,.cb-pri,.akd-btn,.prog-cta,.bpf-age-btn:not(.secondary),.bpf-snack-btn:not(.secondary),.bpf-store-btn:not(.secondary),.bpf-store-btn.primary,.bpf-today-btn.primary,.start-free,.start-btn,.load-player) ,
html :is(button.primary,.btn.primary,.cta,.cta-btn,.btn-or,.ask-btn,.cb-pri,.akd-btn,.prog-cta,.bpf-age-btn:not(.secondary),.bpf-snack-btn:not(.secondary),.bpf-store-btn:not(.secondary)) *{
  background-color:var(--wlf-brand)!important;color:var(--skin-on-brand)!important;-webkit-text-fill-color:var(--skin-on-brand)!important;border-color:var(--wlf-brand)!important;
}

/* Interactive chips / step-tiles / quick-questions were baked with dark text.
   Make them theme-aware so they read on every scheme (light and dark). */
body :is(.chip,.tpill,.bpf-today-action,.quick-question,.topic-chip,.topic-btn,.recovery-chip,.quick-btn){
  background:var(--skin-surface2)!important;background-image:none!important;color:var(--skin-ink)!important;
  -webkit-text-fill-color:var(--skin-ink)!important;border:1px solid var(--skin-border)!important;}
body :is(.chip,.tpill,.bpf-today-action,.quick-question,.topic-chip,.topic-btn,.recovery-chip,.quick-btn) *{
  color:var(--skin-ink)!important;-webkit-text-fill-color:var(--skin-ink)!important;}
body :is(.tpill.active,.chip.active,.topic-chip.active){background:var(--wlf-brand)!important;border-color:var(--wlf-brand)!important;color:var(--skin-on-brand)!important;-webkit-text-fill-color:var(--skin-on-brand)!important;}
body :is(.tpill.active,.chip.active) *{color:var(--skin-on-brand)!important;-webkit-text-fill-color:var(--skin-on-brand)!important;}
body .ask-btn{background:var(--wlf-brand)!important;color:var(--skin-on-brand)!important;-webkit-text-fill-color:var(--skin-on-brand)!important;border-color:var(--wlf-brand)!important;}
body .ask-btn *{color:var(--skin-on-brand)!important;-webkit-text-fill-color:var(--skin-on-brand)!important;}