/* Joujik theme overrides — scope-aware.
   The app supports [data-theme="dark"] and default (light). Each mode has
   its own contrast pitfalls. We patch the specific broken combinations
   without forcing a global theme. */

:root {
  --joujik-grad: linear-gradient(135deg, #FF6B9D 0%, #C471ED 100%);
  --joujik-pink: #FF6B9D;
  --joujik-purple: #C471ED;
}

.btn-primary, .button-primary, .cta-primary {
  background: var(--joujik-grad) !important;
  border: none !important;
  color: #fff !important;
}

/* ═══════════ LIGHT MODE ═══════════ */
/* Inline color:#F5F5F7 on light bg → dark text for contrast */
html:not([data-theme="dark"]) [style*="color: rgb(245, 245, 247)"],
html:not([data-theme="dark"]) [style*="color:'#F5F5F7'"],
html:not([data-theme="dark"]) [style*="color: '#F5F5F7'"] {
  color: #2D1B3E !important;
}
/* Legacy FATMA red → Joujik pink */
html:not([data-theme="dark"]) [style*="color: rgb(139, 26, 26)"],
html:not([data-theme="dark"]) [style*="color:'#8B1A1A'"],
html:not([data-theme="dark"]) [style*="color: '#8B1A1A'"] {
  color: var(--joujik-pink) !important;
}
/* Legacy FATMA gold → Joujik purple */
html:not([data-theme="dark"]) [style*="color: rgb(201, 162, 39)"],
html:not([data-theme="dark"]) [style*="color:'#C9A227'"],
html:not([data-theme="dark"]) [style*="color: '#C9A227'"] {
  color: var(--joujik-purple) !important;
}

/* ═══════════ DARK MODE ═══════════ */
/* Bundle sets body color:#2d2d4a on dark bg — unreadable. Override. */
html[data-theme="dark"] body { color: #F5F5F7 !important; }
html[data-theme="dark"] header a { color: var(--joujik-pink) !important; }

html[data-theme="dark"] .text-gray-900,
html[data-theme="dark"] .text-gray-800,
html[data-theme="dark"] .text-black { color: #F5F5F7 !important; }
html[data-theme="dark"] .text-gray-700,
html[data-theme="dark"] .text-gray-600 { color: #CCCCDD !important; }
html[data-theme="dark"] .text-gray-500,
html[data-theme="dark"] .text-gray-400 { color: #A0A0B8 !important; }

/* Inline dark text on dark surfaces → lighten */
html[data-theme="dark"] [style*="color: rgb(45, 45, 74)"],
html[data-theme="dark"] [style*="color:'#2d2d4a'"],
html[data-theme="dark"] [style*="color: '#2d2d4a'"],
html[data-theme="dark"] [style*="color: rgb(61, 28, 12)"],
html[data-theme="dark"] [style*="color:'#3D1C0C'"],
html[data-theme="dark"] [style*="color: '#3D1C0C'"],
html[data-theme="dark"] [style*="color: rgb(107, 114, 128)"],
html[data-theme="dark"] [style*="color:'#6B7280'"],
html[data-theme="dark"] [style*="color: '#6B7280'"],
html[data-theme="dark"] [style*="color: rgb(55, 65, 81)"],
html[data-theme="dark"] [style*="color:'#374151'"] {
  color: #F5F5F7 !important;
}

/* Inline white bg in dark mode → dark card */
html[data-theme="dark"] [style*="background: white"]:not(img):not(svg),
html[data-theme="dark"] [style*="background:'white'"]:not(img):not(svg),
html[data-theme="dark"] [style*="background: rgb(255, 255, 255)"]:not(img):not(svg) {
  background: #1e2336 !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background: #0f1420 !important;
  color: #F5F5F7 !important;
  border-color: #2d2d4a !important;
}