/* Shared public-site theme bridge. The controller owns data-rxfit-mode and
   body.light-mode; page styles continue to own layout and established effects. */
html[data-rxfit-mode="dark"] {
  color-scheme: dark;
  --rx-background: #0a1128;
  --rx-surface: #0e1933;
  --rx-text: #e8e2d9;
  --rx-text-secondary: #9aa8c6;
  --rx-accent: #C5A059;
  --rx-highlight: #C5A059;
  --rx-on-accent: #0a1128;
  --rx-heading-font: "Space Grotesk", Arial, sans-serif;
  --rx-body-font: "Space Grotesk", Arial, sans-serif;
  --rx-data-font: "JetBrains Mono", Consolas, monospace;
  --rx-radius: 4px;
  --rx-pill-radius: 4px;
  --rx-glass-fill: rgba(10, 17, 40, 0.75);
  /* Existing site depth, border, and shadow recipes. */
  --rx-surface-2: #122045;
  --rx-surface-3: #182a56;
  --rx-border: rgba(197, 160, 89, 0.15);
  --rx-border-bright: rgba(197, 160, 89, 0.35);
  --rx-shadow-color: rgba(0, 0, 0, 0.4);
}

html[data-rxfit-mode="light"] {
  color-scheme: light;
  --rx-background: #F5F1EB;
  --rx-surface: #FFFFFF;
  --rx-text: #2A1C14;
  --rx-text-secondary: #4A3D35;
  --rx-accent: #8a6e3e;
  --rx-highlight: #4A6FA5;
  --rx-on-accent: #FFFFFF;
  --rx-heading-font: "Cormorant Garamond", Georgia, serif;
  --rx-body-font: "DM Sans", Arial, sans-serif;
  --rx-data-font: "Cormorant Garamond", Georgia, serif;
  --rx-radius: 18px;
  --rx-pill-radius: 9999px;
  --rx-glass-fill: #FFFFFF;
  --rx-surface-2: #F9F6F1;
  --rx-surface-3: #F0EBE2;
  --rx-border: rgba(138, 110, 62, 0.15);
  --rx-border-bright: rgba(138, 110, 62, 0.35);
  --rx-shadow-color: rgba(45, 33, 24, 0.07);
}

/* Both existing token vocabularies inherit the same selected mode. Repeating
   these aliases on body prevents legacy body.light-mode tokens from taking
   precedence over the root selection. */
html[data-rxfit-mode],
html[data-rxfit-mode] body {
  --bg: var(--rx-background);
  --surface: var(--rx-surface);
  --surface-2: var(--rx-surface-2);
  --surface-3: var(--rx-surface-3);
  --surface-strong: var(--rx-surface-2);
  --text: var(--rx-text);
  --text-dim: var(--rx-text-secondary);
  --text-muted: var(--rx-text-secondary);
  --muted: var(--rx-text-secondary);
  --text-secondary: var(--rx-text-secondary);
  --gold: var(--rx-accent);
  --gold-dim: var(--rx-accent);
  --gold-bright: var(--rx-accent);
  --accent: var(--rx-accent);
  --highlight: var(--rx-highlight);
  --btn-text: var(--rx-on-accent);
  --on-accent: var(--rx-on-accent);
  --black: var(--rx-on-accent);
  --border: var(--rx-border);
  --border-bright: var(--rx-border-bright);
  --glass-bg: var(--rx-glass-fill);
  --shadow: var(--rx-shadow-color);
  --font-head: var(--rx-heading-font);
  --font-body: var(--rx-body-font);
  --font-mono: var(--rx-data-font);
  --heading-font: var(--rx-heading-font);
  --body-font: var(--rx-body-font);
  --data-font: var(--rx-data-font);
  --radius: var(--rx-radius);
  --radius-pill: var(--rx-pill-radius);
  --button-radius: var(--rx-pill-radius);
}

html[data-rxfit-mode] {
  background-color: var(--rx-background);
}

html[data-rxfit-mode] body {
  background-color: var(--rx-background);
  color: var(--rx-text);
  font-family: var(--rx-body-font);
}

html[data-rxfit-mode] body :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--rx-heading-font);
}

/* Legacy light accents previously resolved to the dark canvas. */
html[data-rxfit-mode="light"] body {
  --navy-blue: var(--rx-highlight);
  --navy-blue-dim: var(--rx-highlight);
  --navy-blue-bright: var(--rx-highlight);
  --fem-accent: var(--rx-highlight);
  --fem-accent-dim: var(--rx-highlight);
  --fem-accent-bright: var(--rx-highlight);
}

html[data-rxfit-mode] body .hero-video-bg {
  background-color: var(--rx-background);
}

html[data-rxfit-mode="light"] body footer:not(.site-footer) {
  background-color: var(--rx-surface);
}

/* Filled actions on Bronze Gold need white foregrounds. Layout, motion, and
   page-specific pill/button shapes remain with their existing definitions. */
html[data-rxfit-mode] body :is(
  .btn-primary, .nav-cta, .drawer-cta, .sidebar-cta, .newsletter-submit,
  .form-submit, .submit-btn, .featured-cta, .featured-badge, .featured-link, .button-primary,
  .skip-link, .category-pill.active
) {
  color: var(--rx-on-accent);
}

/* Several authored articles carry their CTA colors in inline styles. */
html[data-rxfit-mode] body :is(.sidebar-cta[style], .nav-cta[style]) {
  background-color: var(--rx-accent) !important;
  color: var(--rx-on-accent) !important;
}

html[data-rxfit-mode="light"] body .sticky-bar {
  background: var(--rx-surface);
}

html[data-rxfit-mode="light"] body .portrait-overlay {
  background: linear-gradient(to top, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.7) 60%, transparent 100%);
}

/* Article labels and numbered steps use the selected data face. This also
   covers articles that only specified a body/font-head legacy token. */
html[data-rxfit-mode] body :is(
  .mono, .article-breadcrumb, .article-category-tag, .article-meta-author-role,
  .article-meta-date, .article-meta-read, .key-takeaways-label,
  .sidebar-card-label, .author-bio-label, .author-bio-title,
  .related-label, .related-card-cat, .related-card-read,
  .article-figure figcaption, .debt-card-label, .roi-table th,
  .eyebrow, .error-code
) {
  font-family: var(--rx-data-font);
}

html[data-rxfit-mode] body .protocol-steps li::before {
  font-family: var(--rx-data-font);
}

html[data-rxfit-mode] body :is(.article-category-tag, .debt-card, .roi-table) {
  border-radius: var(--rx-radius);
}

html[data-rxfit-mode="light"] body .related-card:hover {
  box-shadow: 0 12px 40px var(--shadow);
}

/* The same approved assets and toggle glyphs represent the current mode on
   both legacy pages and the newer consultation page. */
html[data-rxfit-mode="light"] body :is(.logo-dark, .sun-icon),
html[data-rxfit-mode="dark"] body :is(.logo-light, .moon-icon) {
  display: none;
}

html[data-rxfit-mode="light"] body :is(.logo-light, .moon-icon),
html[data-rxfit-mode="dark"] body :is(.logo-dark, .sun-icon) {
  display: block;
}

html[data-rxfit-mode] body ::selection {
  background: var(--rx-accent);
  color: var(--rx-on-accent);
}

/* 404 is self-contained and embeds this bridge. Its explicit mode must also
   override the original OS-only gradient when a visitor saved a choice. */
html[data-rxfit-mode] body.error-page {
  background: var(--rx-background);
}

html[data-rxfit-mode] body.error-page .error-panel {
  background: var(--rx-surface);
  border-radius: var(--rx-radius);
}

html[data-rxfit-mode] body.error-page .button {
  border-radius: var(--rx-pill-radius);
}

html[data-rxfit-mode] body.error-page .button:hover,
html[data-rxfit-mode] body.error-page .button:focus-visible {
  color: var(--rx-on-accent);
}

/* Pages without a persistent navigation bar retain an accessible theme
   control without changing their centered content layout. */
.standalone-theme-control {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1002;
}

html[data-rxfit-mode] body :is(.standalone-theme-control, .site-nav) .theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--rx-radius);
  background: var(--rx-glass-fill);
  color: var(--rx-text-secondary);
  font-family: var(--rx-body-font);
  cursor: pointer;
}

html[data-rxfit-mode] body :is(.standalone-theme-control, .site-nav) .theme-toggle-btn:hover {
  border-color: var(--rx-accent);
  color: var(--rx-accent);
}