/* Global contrast safety layer.
   Purpose: prevent dark text on dark panels and white text on light panels
   without changing product behavior or enabling runtime functionality. */

:root {
  --yop-contrast-dark-text: #0f172a;
  --yop-contrast-muted-text: #475569;
  --yop-contrast-light-text: #f8fafc;
  --yop-contrast-light-muted: #cbd5e1;
}

/* Light surfaces must keep dark readable text. */
.yop-card,
.enterprise-category-card,
.enterprise-listing-card,
.enterprise-panel,
.enterprise-mockup,
.card,
.filter-bar,
.yop-cookie-banner,
.yop-ai-panel,
input,
select,
textarea,
[class*="card"],
[class*="panel"] {
  color: var(--yop-contrast-dark-text);
}

.yop-card h1,
.yop-card h2,
.yop-card h3,
.yop-card h4,
.enterprise-panel h1,
.enterprise-panel h2,
.enterprise-panel h3,
.card h1,
.card h2,
.card h3,
.card h4,
[class*="card"] h1,
[class*="card"] h2,
[class*="card"] h3,
[class*="panel"] h1,
[class*="panel"] h2,
[class*="panel"] h3 {
  color: var(--yop-contrast-dark-text);
}

.yop-card p,
.yop-card span,
.yop-card small,
.enterprise-panel p,
.enterprise-panel span,
.enterprise-panel small,
.card p,
.card span,
.card small,
[class*="card"] p,
[class*="card"] span,
[class*="card"] small,
[class*="panel"] p,
[class*="panel"] span,
[class*="panel"] small {
  color: inherit;
}

/* Dark/gradient sections must force readable light text unless an explicit status color is used. */
.hero,
.runtime-box,
.ai-stream-item,
[data-contrast="dark"],
.dark-surface,
.security-dark-surface,
[class*="dark-card"],
[class*="dark-panel"] {
  color: var(--yop-contrast-light-text) !important;
}

.hero h1,
.hero h2,
.hero h3,
.hero p,
.runtime-box h1,
.runtime-box h2,
.runtime-box h3,
.runtime-box p,
.runtime-box div,
.runtime-box span:not(.status-online):not(.status-warning):not(.status-danger),
.ai-stream-item,
[data-contrast="dark"] h1,
[data-contrast="dark"] h2,
[data-contrast="dark"] h3,
[data-contrast="dark"] p,
[data-contrast="dark"] span,
.dark-surface h1,
.dark-surface h2,
.dark-surface h3,
.dark-surface p,
.dark-surface span,
.security-dark-surface h1,
.security-dark-surface h2,
.security-dark-surface h3,
.security-dark-surface p,
.security-dark-surface span {
  color: var(--yop-contrast-light-text) !important;
}

.runtime-box .muted,
.runtime-box small,
[data-contrast="dark"] .muted,
.dark-surface .muted,
.security-dark-surface .muted {
  color: var(--yop-contrast-light-muted) !important;
}

/* Preserve semantic colors with adequate brightness. */
.status-online,
.text-success {
  color: #16a34a !important;
}

.runtime-box .status-online,
[data-contrast="dark"] .status-online,
.dark-surface .status-online {
  color: #4ade80 !important;
}

.status-warning,
.text-warning {
  color: #d97706 !important;
}

.runtime-box .status-warning,
[data-contrast="dark"] .status-warning,
.dark-surface .status-warning {
  color: #fbbf24 !important;
}

.status-danger,
.text-danger {
  color: #dc2626 !important;
}

.runtime-box .status-danger,
[data-contrast="dark"] .status-danger,
.dark-surface .status-danger {
  color: #f87171 !important;
}

/* Disabled controls should remain legible on both light and dark backgrounds. */
button:disabled,
.button-disabled,
[aria-disabled="true"] {
  color: #475569 !important;
  opacity: .72;
}

.runtime-box button:disabled,
[data-contrast="dark"] button:disabled,
.dark-surface button:disabled {
  color: #cbd5e1 !important;
}

/* High-specificity overrides for pages that use dark runtime panels under the global light theme. */
html[data-yop-theme="light"] .runtime-box,
html[data-yop-theme="light"] .ai-stream-item,
html[data-yop-theme="light"] [data-contrast="dark"],
html[data-yop-theme="light"] .dark-surface,
html[data-yop-theme="light"] .security-dark-surface {
  color: var(--yop-contrast-light-text) !important;
}

html[data-yop-theme="light"] .runtime-box h1,
html[data-yop-theme="light"] .runtime-box h2,
html[data-yop-theme="light"] .runtime-box h3,
html[data-yop-theme="light"] .runtime-box h4,
html[data-yop-theme="light"] .runtime-box p,
html[data-yop-theme="light"] .runtime-box div,
html[data-yop-theme="light"] .runtime-box span:not(.status-online):not(.status-warning):not(.status-danger),
html[data-yop-theme="light"] .ai-stream-item,
html[data-yop-theme="light"] [data-contrast="dark"] h1,
html[data-yop-theme="light"] [data-contrast="dark"] h2,
html[data-yop-theme="light"] [data-contrast="dark"] h3,
html[data-yop-theme="light"] [data-contrast="dark"] p,
html[data-yop-theme="light"] [data-contrast="dark"] span:not(.status-online):not(.status-warning):not(.status-danger) {
  color: var(--yop-contrast-light-text) !important;
}

html[data-yop-theme="light"] .ai-command-center-page .yop-header h1 {
  color: var(--yop-contrast-dark-text) !important;
}

html[data-yop-theme="light"] .ai-command-center-page .yop-header p,
html[data-yop-theme="light"] .ai-command-center-page .runtime-action-note {
  color: var(--yop-contrast-muted-text) !important;
}

/* Exact AI command center override: beats the broad light-theme :has() typography reset. */
html[data-yop-theme="light"] body.ai-command-center-page .runtime-box h1,
html[data-yop-theme="light"] body.ai-command-center-page .runtime-box h2,
html[data-yop-theme="light"] body.ai-command-center-page .runtime-box h3,
html[data-yop-theme="light"] body.ai-command-center-page .runtime-box h4,
html[data-yop-theme="light"] body.ai-command-center-page .runtime-box p,
html[data-yop-theme="light"] body.ai-command-center-page .runtime-box div,
html[data-yop-theme="light"] body.ai-command-center-page .runtime-box span:not(.status-online):not(.status-warning):not(.status-danger) {
  color: var(--yop-contrast-light-text) !important;
}

html[data-yop-theme="light"] body.ai-command-center-page .yop-header h1 {
  color: var(--yop-contrast-dark-text) !important;
}

html[data-yop-theme="light"] body.ai-command-center-page .yop-header p,
html[data-yop-theme="light"] body.ai-command-center-page .runtime-action-note {
  color: var(--yop-contrast-muted-text) !important;
}