/* ManaResource Theme Compatibility Layer
   Bridges legacy page-specific variables to the canonical ManaResource theme tokens.
   This file intentionally contains no component redesign or tool logic.
*/

/* Legacy auth/account/dashboard variables */
body.theme-mana {
  --mana-bg: var(--bg-main);
  --mana-card: var(--bg-card);
  --mana-border: var(--border-color);
  --mana-text: var(--text-main);
  --mana-muted: var(--text-muted);
  --mana-yellow: var(--accent);
}

body.theme-midnight {
  --mana-bg: var(--bg-main);
  --mana-card: var(--bg-card);
  --mana-border: var(--border-color);
  --mana-text: var(--text-main);
  --mana-muted: var(--text-muted);
  --mana-yellow: var(--accent);
}

body.theme-cream {
  --mana-bg: var(--bg-main);
  --mana-card: var(--bg-card);
  --mana-border: var(--border-color);
  --mana-text: var(--text-main);
  --mana-muted: var(--text-muted);
  --mana-yellow: var(--accent);
}

body.theme-clean {
  --mana-bg: var(--bg-main);
  --mana-card: var(--bg-card);
  --mana-border: var(--border-color);
  --mana-text: var(--text-main);
  --mana-muted: var(--text-muted);
  --mana-yellow: var(--accent);
}

body.theme-cat {
  --mana-bg: var(--bg-main);
  --mana-card: var(--bg-card);
  --mana-border: var(--border-color);
  --mana-text: var(--text-main);
  --mana-muted: var(--text-muted);
  --mana-yellow: var(--accent);
}

/* Legacy ManaCopywriting variables.
   Copywriting reuses some canonical variable names, so only its legacy aliases
   are bridged here; canonical names are overridden per theme below. */
body.theme-mana,
body.theme-midnight,
body.theme-cream,
body.theme-clean,
body.theme-cat {
  --bg-primary: var(--bg-main);
  --bg-secondary: var(--bg-section-alt);
  --bg-input: var(--bg-section);
  --border-subtle: var(--border-color);
  --text-primary: var(--text-main);
  --accent-color: var(--accent);
  --accent-hover: var(--accent);
  --accent-glow: var(--shadow-glow);
  --badge-bg: var(--accent-soft);
  --badge-text: var(--accent-text);
  --header-bg: var(--bg-card);
  --glass-border: var(--border-color);
}

/* These properties are also legacy names in Copywriting but are canonical
   names in ManaResource. Set the actual themed value directly to avoid CSS
   custom-property self-reference/cycles. */
body.theme-mana {
  --bg-card: rgba(255,255,255,.92);
  --border-color: rgba(17,17,17,.10);
  --text-secondary: #303030;
  --text-muted: #666666;
}
body.theme-midnight {
  --bg-card: rgba(28,29,33,.92);
  --border-color: rgba(255,255,255,.10);
  --text-secondary: #D4D4D8;
  --text-muted: #A1A1AA;
}
body.theme-cream {
  --bg-card: rgba(255,253,248,.94);
  --border-color: rgba(43,41,36,.10);
  --text-secondary: #4A463E;
  --text-muted: #746F65;
}
body.theme-clean {
  --bg-card: rgba(255,255,255,.96);
  --border-color: rgba(17,17,17,.06);
  --text-secondary: #444444;
  --text-muted: #6B6B6B;
}
body.theme-cat {
  --bg-card: rgba(255,249,240,.94);
  --border-color: rgba(139,94,60,.12);
  --text-secondary: #654F43;
  --text-muted: #8B7466;
}

/* Copywriting uses Tailwind's dark utility classes too. Keep the legacy dark
   utility surfaces from forcing a dark panel when a light ManaResource theme
   is active. */
body.theme-mana .bg-black\/30,
body.theme-cream .bg-black\/30,
body.theme-clean .bg-black\/30,
body.theme-cat .bg-black\/30 {
  background-color: color-mix(in srgb, var(--mr-surface-2) 86%, transparent) !important;
}

/* Strong readability defaults for legacy account/dashboard text. */
.mr-unified-page .account,
.mr-unified-page .dash {
  color: var(--mr-text);
}

.mr-unified-page .account :where(h1,h2,h3,h4,h5,h6,.card-title,.membership-title,.history-title),
.mr-unified-page .dash :where(h1,h2,h3,h4,h5,h6,.tool-title,.membership-title) {
  color: var(--mr-heading) !important;
}

.mr-unified-page .account :where(p,span,li,label),
.mr-unified-page .dash :where(p,span,li,label) {
  color: var(--mr-text-2);
}

.mr-unified-page .account :where(.history-status,.history-meta,.history-empty),
.mr-unified-page .dash :where(.membership-label,.tool-description) {
  color: var(--mr-muted) !important;
}

/* The account/dashboard legacy cards must follow the current theme instead of
   retaining the old Midnight-only surface. */
.mr-unified-page :where(.card,.membership,.tool-card) {
  background: var(--mr-card) !important;
  color: var(--mr-text);
}

/* Preserve semantic status colors while keeping their text readable. */
.mr-unified-page :where(.status-active,.membership-status.active,.status-tag.status-available) {
  color: #16803a;
}

body.theme-midnight .mr-unified-page :where(.status-active,.membership-status.active,.status-tag.status-available) {
  color: #6ee7a0;
}

/* Copywriting's output and code area should always have readable text. */
body.theme-mana .mr-unified-page #json-output-display,
body.theme-cream .mr-unified-page #json-output-display,
body.theme-clean .mr-unified-page #json-output-display,
body.theme-cat .mr-unified-page #json-output-display {
  color: var(--mr-text) !important;
}

/* ============================================================
   PHASE 5C — LIGHT-THEME VISIBILITY HARDENING
   Fix legacy Tailwind/inline utility colors that can override
   ManaResource semantic theme tokens on light themes.
   ============================================================ */

/* Copywriting legacy aliases: the page uses both canonical ManaResource
   variables and its original data-theme variables. Keep both in sync. */
body.theme-mana,
body.theme-midnight,
body.theme-cream,
body.theme-clean,
body.theme-cat {
  --text-primary: var(--text-main);
  --accent-color: var(--accent);
  --accent-hover: var(--accent);
  --badge-bg: var(--accent-soft);
  --badge-text: var(--accent-text);
  --bg-primary: var(--bg-main);
  --bg-secondary: var(--bg-section-alt);
  --bg-input: var(--bg-section);
  --border-subtle: var(--border-color);
  --glass-border: var(--border-color);
}

/* Light themes: legacy white text must become readable body text. */
body.theme-mana :where(.text-white),
body.theme-cream :where(.text-white),
body.theme-clean :where(.text-white),
body.theme-cat :where(.text-white) {
  color: var(--text-main) !important;
}

/* Legacy Tailwind muted/text classes. */
body.theme-mana :where(.text-gray-100,.text-gray-200,.text-gray-300,.text-gray-400,.text-gray-500),
body.theme-cream :where(.text-gray-100,.text-gray-200,.text-gray-300,.text-gray-400,.text-gray-500),
body.theme-clean :where(.text-gray-100,.text-gray-200,.text-gray-300,.text-gray-400,.text-gray-500),
body.theme-cat :where(.text-gray-100,.text-gray-200,.text-gray-300,.text-gray-400,.text-gray-500) {
  color: var(--text-secondary) !important;
}

/* Copywriting headings/labels that carry explicit legacy utility colours. */
body.theme-mana :where(#workspace h1,#workspace h2,#workspace h3,#workspace h4,#workspace label,#workflow-section h2,#workflow-section h3),
body.theme-cream :where(#workspace h1,#workspace h2,#workspace h3,#workspace h4,#workspace label,#workflow-section h2,#workflow-section h3),
body.theme-clean :where(#workspace h1,#workspace h2,#workspace h3,#workspace h4,#workspace label,#workflow-section h2,#workflow-section h3),
body.theme-cat :where(#workspace h1,#workspace h2,#workspace h3,#workspace h4,#workspace label,#workflow-section h2,#workflow-section h3) {
  color: var(--text-heading) !important;
}

/* Primary buttons: Clean uses black primary surfaces, so text-black would
   disappear. Other light themes retain dark text on their accent surface. */
body.theme-clean :where(a.text-black,button.text-black,#btn-generate-main-bottom,#btn-copy-json,#btn-bottom-action),
body.theme-clean :where(.text-black) {
  color: #fff !important;
}
body.theme-mana :where(#btn-generate-main-bottom,#btn-copy-json,#btn-bottom-action),
body.theme-cream :where(#btn-generate-main-bottom,#btn-copy-json,#btn-bottom-action),
body.theme-cat :where(#btn-generate-main-bottom,#btn-copy-json,#btn-bottom-action) {
  color: #111 !important;
}

/* Workflow cards and the large light-theme surfaces. */
body.theme-mana :where(.card-studio,.bg-white,.bg-gray-50,.bg-gray-100),
body.theme-cream :where(.card-studio,.bg-white,.bg-gray-50,.bg-gray-100),
body.theme-clean :where(.card-studio,.bg-white,.bg-gray-50,.bg-gray-100),
body.theme-cat :where(.card-studio,.bg-white,.bg-gray-50,.bg-gray-100) {
  color: var(--text-main);
}

/* Legacy dark translucent utility surfaces become theme-aware on light themes. */
body.theme-mana :where(.bg-black\/20,.bg-black\/30,.bg-gray-700),
body.theme-cream :where(.bg-black\/20,.bg-black\/30,.bg-gray-700),
body.theme-clean :where(.bg-black\/20,.bg-black\/30,.bg-gray-700),
body.theme-cat :where(.bg-black\/20,.bg-black\/30,.bg-gray-700) {
  background-color: var(--bg-card-soft) !important;
  color: var(--text-main) !important;
}

/* Legacy white borders on light themes. */
body.theme-mana :where(.border-white\/5,.border-white\/10),
body.theme-cream :where(.border-white\/5,.border-white\/10),
body.theme-clean :where(.border-white\/5,.border-white\/10),
body.theme-cat :where(.border-white\/5,.border-white\/10) {
  border-color: var(--border-color) !important;
}

/* Platform buttons: inactive options need readable text/border on light themes. */
body.theme-mana :where(.platform-btn),
body.theme-cream :where(.platform-btn),
body.theme-clean :where(.platform-btn),
body.theme-cat :where(.platform-btn) {
  color: var(--text-main) !important;
  border-color: var(--border-strong) !important;
  background-color: var(--bg-card) !important;
}
body.theme-mana :where(.platform-btn.bg-amber-500\/10,.platform-btn[data-platform="TikTok"]),
body.theme-cream :where(.platform-btn.bg-amber-500\/10,.platform-btn[data-platform="TikTok"]),
body.theme-clean :where(.platform-btn.bg-amber-500\/10,.platform-btn[data-platform="TikTok"]),
body.theme-cat :where(.platform-btn.bg-amber-500\/10,.platform-btn[data-platform="TikTok"]) {
  background-color: var(--accent-soft) !important;
  color: var(--accent-text) !important;
  border-color: var(--accent) !important;
}

/* JSON/secondary controls on light themes. */
body.theme-mana :where(#btn-dl-json,.text-muted),
body.theme-cream :where(#btn-dl-json,.text-muted),
body.theme-clean :where(#btn-dl-json,.text-muted),
body.theme-cat :where(#btn-dl-json,.text-muted) {
  color: var(--text-secondary) !important;
}
body.theme-mana :where(#btn-dl-json),
body.theme-cream :where(#btn-dl-json),
body.theme-clean :where(#btn-dl-json),
body.theme-cat :where(#btn-dl-json) {
  border-color: var(--border-color) !important;
}

/* Account + Dashboard: eliminate remaining hard-coded white-on-light controls. */
body.theme-mana :where(.history-search,.history-filter),
body.theme-cream :where(.history-search,.history-filter),
body.theme-clean :where(.history-search,.history-filter),
body.theme-cat :where(.history-search,.history-filter) {
  background: var(--bg-section) !important;
  color: var(--text-main) !important;
  border-color: var(--border-strong) !important;
}
body.theme-mana :where(.history-btn:not(.primary)),
body.theme-cream :where(.history-btn:not(.primary)),
body.theme-clean :where(.history-btn:not(.primary)),
body.theme-cat :where(.history-btn:not(.primary)) {
  background: transparent !important;
  color: var(--text-main) !important;
}
body.theme-mana :where(.logout-btn),
body.theme-cream :where(.logout-btn),
body.theme-clean :where(.logout-btn),
body.theme-cat :where(.logout-btn) {
  color: var(--text-main) !important;
}

/* Preserve Midnight's intentional dark utility styling. */
body.theme-midnight :where(.text-white) { color: #fff !important; }
body.theme-midnight :where(.text-gray-100,.text-gray-200,.text-gray-300,.text-gray-400,.text-gray-500) { color: var(--text-secondary) !important; }