/* Neutral dark surfaces for the legacy account, seller and detail components. */
:root[data-theme="dark"] {
  --status-success: #8fd2ad;
  --status-warning: #e4bf79;
  --status-danger: #ff9a8b;
}

/* Shared surfaces and their interactive states. Product icon palettes stay intact. */
:root[data-theme="dark"] :is(
  .form-panel, .form-section, .profile-form, .dashboard-list, .empty-state,
  .order-summary, .checkout-form, .receipt-card, .program-card, .purchase-row,
  .finance-row, .metric-card, .ledger-table, .review-links a,
  .share-buttons .share-button, .share-draft, .bottom-cta
) { background: var(--surface); color: var(--ink); border-color: var(--line); }
:root[data-theme="dark"] :is(
  .auth-tabs, .membership-banner, .creator-benefits, .referral-code, .copy-row code,
  .static-chip, .category-tag, .card-meta .category, .commission-badge,
  .sales-badge, .free-app-link > span, .avatar, .studio-notice, .studio-next,
  .studio-next-icon, .studio-empty, .studio-panel table thead, .ledger-table th,
  .platform-revenue, .creator-strip, .creator-strip-icon
) { background: var(--soft); color: var(--ink); border-color: var(--line); }
:root[data-theme="dark"] :is(
  .auth-tabs button.active, .auth-tabs [aria-selected="true"], .tab-button.active
) { background: var(--soft); color: var(--ink); box-shadow: none; }
:root[data-theme="dark"] .auth-tabs button.active,
:root[data-theme="dark"] .auth-tabs [aria-selected="true"] { background: var(--surface); }
:root[data-theme="dark"] :is(
  .button.secondary:hover, .button.ghost:hover, .category-btn:hover,
  .tab-button:hover, .modal-close:hover, .card-arrow:hover,
  .share-buttons .share-button:hover
) { background: var(--soft); color: var(--ink); border-color: var(--line); }
:root[data-theme="dark"] .button.dark { background: var(--ink); color: var(--paper); }
:root[data-theme="dark"] .button.dark:hover { background: var(--muted); }
:root[data-theme="dark"] .hero-search { border-color: var(--line); }
:root[data-theme="dark"] .hero-feature { box-shadow: none; }
:root[data-theme="dark"] :is(.find-card:hover, .creator-profile:hover) {
  border-color: var(--muted);
  box-shadow: 0 9px 24px #0003;
}
:root[data-theme="dark"] .modal::backdrop { background: #0009; }
:root[data-theme="dark"] .toast {
  background: var(--soft); color: var(--ink); border-color: var(--line);
  box-shadow: 0 7px 25px #0005;
}
:root[data-theme="dark"] .skeleton {
  background-image: linear-gradient(90deg, var(--surface), var(--soft), var(--surface));
}

/* Foregrounds inherited from the original light-only forms and dashboards. */
:root[data-theme="dark"] :is(
  .form-field label, .checkbox-label, .checkbox-field, .faq-list summary,
  .plan-features li, .feature-list li, .stat-row strong, .card-meta .price,
  .card-meta strong, .money-breakdown strong, .money-breakdown > :last-child,
  .metric-card > strong, .metric-card .metric-value, .program-stats strong,
  .studio-notice strong, .studio-metric-label, .studio-text-link,
  .studio-chart-data > summary
) { color: var(--ink); }
:root[data-theme="dark"] :is(
  .modal-header p, .modal-body > p, .modal-close, .auth-tabs button,
  .form-field label span, .form-section > p, .profile-form > p, .empty-state p,
  .empty-state > svg, .membership-banner p, .membership-row p,
  .membership-person > span, .review-details, .section-toolbar > span,
  .count-label, .creator-profile p, .creator-card p, .creator-card > div > span,
  .creator-strip p, .detail-summary, .detail-price > span, .purchase-facts,
  .price-period, .pricing-footer, .how-number, .faq-list details > p,
  .info-split p, .bottom-cta p, .bottom-cta .eyebrow,
  .order-summary p, .checkout-form > p, .receipt-card > p, .program-card > p,
  .purchase-row p, .finance-row p, .purchase-row small, .finance-row small,
  .checkout-account, .money-breakdown > div, .money-breakdown > p,
  .metric-card > span, .metric-card > p, .metric-card > h3, .metric-card > small,
  .ledger-table small, .program-stats, .share-note, .discovery-filter-help,
  .leader-row p, .leader-info > span, .click-count > span, .click-count small,
  .footer-top .footer-links a, .sample-notice, .icon-button, .card-arrow,
  .search-field > svg, .search-wrap > svg, .results-bar, .results-bar strong,
  .count-pill, .stat-row,
  .studio-notice p, .studio-notice > svg, .studio-period p, .studio-period-label,
  .studio-metric-label svg, .studio-metric > p, .studio-panel-heading p,
  .studio-chart-total span, .studio-chart-scale, .studio-chart-dates,
  .studio-panel table thead th, .studio-kicker, .studio-next-icon svg,
  .studio-next > p, .studio-membership p, .studio-membership > span,
  .studio-operations .studio-panel-heading > svg, .studio-action-row small,
  .studio-action-value svg, .studio-platform-share > span,
  .studio-platform-share > p, .studio-app-name small, .studio-empty > svg,
  .studio-empty > p, .studio-shares p, .studio-share span,
  .studio-system-status > span, .studio-data-note
) { color: var(--muted); }
:root[data-theme="dark"] :is(
  .text-button, .demo-link, .free-app-link, .creator-profile .text-link,
  .catalog-results .text-button, .feature-list svg, .plan-features svg,
  .purchase-facts svg, .how-card > svg, .studio-metric-accent > strong
) { color: var(--coral); }
:root[data-theme="dark"] .modal .auth-tabs :is(button.active, [aria-selected="true"]),
:root[data-theme="dark"] .money-breakdown > :is(div, p):last-child { color: var(--ink); }

/* Inputs keep the same neutral surface and a visible coral focus ring. */
:root[data-theme="dark"] :is(.form-field, .modal, .copy-row) :is(input, select, textarea),
:root[data-theme="dark"] .share-draft {
  color: var(--ink); background-color: var(--surface); border-color: var(--line);
}
:root[data-theme="dark"] :is(.form-field, .modal) :is(input, textarea)::placeholder {
  color: var(--muted); opacity: 1;
}
:root[data-theme="dark"] :is(.form-field, .modal) :is(input, select, textarea):focus,
:root[data-theme="dark"] .share-draft:focus {
  border-color: var(--coral);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--coral) 20%, transparent);
}
:root[data-theme="dark"] :is(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--coral);
}
:root[data-theme="dark"] .share-buttons .share-button:focus-visible {
  outline-color: var(--coral);
}

/* Tables, chart frames and supporting dividers share one neutral boundary. */
:root[data-theme="dark"] :is(
  .stat-row, .faq-list details, .money-breakdown, .money-breakdown > :last-child,
  .ledger-table th, .ledger-table td, .table-scroll, .ledger-wrap,
  .studio-panel table th, .studio-panel table td, .studio-membership,
  .studio-action-row
) { border-color: var(--line); }
:root[data-theme="dark"] .studio-chart-grid { stroke: var(--line); }
:root[data-theme="dark"] .studio-chart-area {
  fill: color-mix(in srgb, var(--coral) 12%, var(--surface));
}
:root[data-theme="dark"] .studio-chart-empty :is(strong, span) {
  background: var(--surface); color: var(--ink);
}
:root[data-theme="dark"] .studio-chart-empty span { color: var(--muted); }
:root[data-theme="dark"] .studio-metric-accent {
  background: var(--surface); border-color: var(--line);
}

/* Status color is limited to small notices and badges, with readable text. */
:root[data-theme="dark"] :is(.status, .membership-status, .receipt-status) {
  color: var(--ink); background: var(--soft); border-color: var(--line);
}
:root[data-theme="dark"] :is(
  .status.approved, .membership-status, .receipt-status, .form-success
) {
  color: var(--status-success);
  background: color-mix(in srgb, var(--status-success) 8%, var(--surface));
  border-color: color-mix(in srgb, var(--status-success) 25%, var(--line));
}
:root[data-theme="dark"] :is(
  .status.pending, .membership-status.pending, .membership-status.inactive,
  .receipt-status.pending, .receipt-status.simulated, .notice.warning,
  .test-notice, .demo-payment, .mode-banner
) {
  color: var(--status-warning);
  background: color-mix(in srgb, var(--status-warning) 8%, var(--surface));
  border-color: color-mix(in srgb, var(--status-warning) 25%, var(--line));
}
:root[data-theme="dark"] :is(
  .status.rejected, .receipt-status.refunded, .receipt-status.failed, .form-error
) {
  color: var(--status-danger);
  background: color-mix(in srgb, var(--status-danger) 8%, var(--surface));
  border-color: color-mix(in srgb, var(--status-danger) 25%, var(--line));
}
:root[data-theme="dark"] .form-field .form-error { background: transparent; }
:root[data-theme="dark"] .form-field [aria-invalid="true"] { border-color: var(--status-danger); }
:root[data-theme="dark"] :is(.membership-status.spotlight, .sponsored-label) {
  color: var(--coral); background: var(--soft); border-color: var(--line);
}
:root[data-theme="dark"] .review-note { color: var(--status-warning) !important; }
:root[data-theme="dark"] .danger { color: var(--status-danger) !important; }