/**
 * SparkPrompt Dark Mode - Complete Color System
 * Designed for accessibility and smooth transitions
 */

/* ============================================
   CSS CUSTOM PROPERTIES (Color Tokens)
   ============================================ */

:root {
  /* Light Mode Colors */
  --sp-bg-page: #f8fafc;
  --sp-bg-card: #ffffff;
  --sp-bg-elevated: #f1f5f9;
  --sp-bg-hover: #e2e8f0;
  
  --sp-text-primary: #0f172a;
  --sp-text-secondary: #475569;
  --sp-text-muted: #64748b;
  --sp-text-link: #4f46e5;
  
  --sp-border-subtle: #e2e8f0;
  --sp-border-default: #cbd5e1;
  
  --sp-accent: #4f46e5;
  --sp-accent-hover: #4338ca;
}

.dark {
  /* Dark Mode Colors */
  --sp-bg-page: #020617;
  --sp-bg-card: #0f172a;
  --sp-bg-elevated: #1e293b;
  --sp-bg-hover: #334155;
  
  --sp-text-primary: #f8fafc;
  --sp-text-secondary: #cbd5e1;
  --sp-text-muted: #94a3b8;
  --sp-text-link: #818cf8;
  
  --sp-border-subtle: #1e293b;
  --sp-border-default: #334155;
  
  --sp-accent: #818cf8;
  --sp-accent-hover: #6366f1;
}

/* ============================================
   GLOBAL TRANSITIONS
   ============================================ */

.dark,
.dark * {
  transition: background-color 0.2s ease, 
              border-color 0.2s ease, 
              color 0.2s ease;
}

/* ============================================
   BACKGROUND OVERRIDES
   ============================================ */

html.dark body {
  background-color: var(--sp-bg-page) !important;
  color: var(--sp-text-primary) !important;
}

/* bg-white → card background in dark mode */
html.dark .bg-white,
html.dark.bg-white {
  background-color: var(--sp-bg-card) !important;
}

/* bg-gray-50 → page background in dark mode */
html.dark .bg-gray-50,
html.dark.bg-gray-50 {
  background-color: var(--sp-bg-page) !important;
}

/* bg-gray-100 → elevated/hover background */
html.dark .bg-gray-100,
html.dark.bg-gray-100 {
  background-color: var(--sp-bg-elevated) !important;
}

/* bg-gray-200 → hover state background */
html.dark .bg-gray-200,
html.dark.bg-gray-200 {
  background-color: var(--sp-bg-hover) !important;
}

/* bg-gray-300 → slightly lighter for borders/dividers */
html.dark .bg-gray-300,
html.dark.bg-gray-300 {
  background-color: #475569 !important;
}

/* ============================================
   TEXT COLOR OVERRIDES
   ============================================ */

html.dark .text-gray-900,
html.dark.text-gray-900 {
  color: var(--sp-text-primary) !important;
}

html.dark .text-gray-800,
html.dark.text-gray-800 {
  color: var(--sp-text-secondary) !important;
}

html.dark .text-gray-700,
html.dark.text-gray-700 {
  color: var(--sp-text-secondary) !important;
}

html.dark .text-gray-600,
html.dark.text-gray-600 {
  color: var(--sp-text-muted) !important;
}

html.dark .text-gray-500,
html.dark.text-gray-500 {
  color: var(--sp-text-muted) !important;
}

html.dark .text-gray-400,
html.dark.text-gray-400 {
  color: #64748b !important;
}

html.dark .text-gray-300,
html.dark.text-gray-300 {
  color: #475569 !important;
}

/* ============================================
   BORDER OVERRIDES
   ============================================ */

html.dark .border-gray-100,
html.dark.border-gray-100 {
  border-color: var(--sp-bg-card) !important;
}

html.dark .border-gray-200,
html.dark.border-gray-200 {
  border-color: var(--sp-border-subtle) !important;
}

html.dark .border-gray-300,
html.dark.border-gray-300 {
  border-color: var(--sp-border-default) !important;
}

html.dark .border-gray-700,
html.dark.border-gray-700 {
  border-color: #475569 !important;
}

html.dark .border-gray-800,
html.dark.border-gray-800 {
  border-color: #64748b !important;
}

/* ============================================
   HOVER STATE OVERRIDES
   ============================================ */

html.dark .hover\:bg-white:hover {
  background-color: var(--sp-bg-elevated) !important;
}

html.dark .hover\:bg-gray-50:hover {
  background-color: var(--sp-bg-card) !important;
}

html.dark .hover\:bg-gray-100:hover {
  background-color: var(--sp-bg-elevated) !important;
}

/* ============================================
   MAINTENANCE BANNER DARK MODE
   ============================================ */

html.dark #maintenance-banner.bg-amber-50 {
  background-color: #78350f;
  border-color: #b45309;
}

html.dark #maintenance-banner.bg-amber-50 .text-amber-800 {
  color: #fcd34d;
}

html.dark #maintenance-banner.bg-amber-50 .text-amber-600 {
  color: #fbbf24;
}

html.dark #maintenance-banner.bg-amber-50 .hover\:bg-amber-100:hover {
  background-color: #92400e;
}

html.dark #maintenance-banner.bg-red-50 {
  background-color: #7f1d1d;
  border-color: #b91c1c;
}

html.dark #maintenance-banner.bg-red-50 .text-red-800 {
  color: #fca5a5;
}

html.dark #maintenance-banner.bg-red-50 .text-red-600 {
  color: #f87171;
}

html.dark #maintenance-banner.bg-red-50 .hover\:bg-red-100:hover {
  background-color: #991b1b;
}

html.dark #maintenance-banner.bg-blue-50 {
  background-color: #1e3a8a;
  border-color: #1d4ed8;
}

html.dark #maintenance-banner.bg-blue-50 .text-blue-800 {
  color: #93c5fd;
}

html.dark #maintenance-banner.bg-blue-50 .text-blue-600 {
  color: #60a5fa;
}

html.dark #maintenance-banner.bg-blue-50 .hover\:bg-blue-100:hover {
  background-color: #1e40af;
}

/* ============================================
   TOGGLE BUTTON
   ============================================ */

.dark-mode-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--sp-border-default);
  border-radius: 8px;
  background-color: var(--sp-bg-card);
  color: var(--sp-text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.dark-mode-toggle:hover {
  background-color: var(--sp-bg-elevated);
  border-color: var(--sp-border-default);
}

/* ============================================
   NO-JS FALLBACK
   ============================================ */

@media (prefers-color-scheme: dark) {
  html:not(.js-loaded) {
    --sp-bg-page: #020617;
    --sp-bg-card: #0f172a;
    --sp-bg-elevated: #1e293b;
    --sp-text-primary: #f8fafc;
    --sp-text-secondary: #cbd5e1;
    --sp-text-muted: #94a3b8;
  }
}

/* ============================================
   ACCESSIBILITY: REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .dark,
  .dark * {
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   CODE BLOCK DARK MODE STYLING (Updated per Carla's Review)
   ============================================ */

/* Code block backgrounds - DISTINCT from card bg for contrast */
html.dark .bg-gray-900,
html.dark pre {
  background-color: #020617 !important; /* slate-950 - darker than cards */
  border: 1px solid #1e293b !important;
}

html.dark .bg-gray-800 {
  background-color: #0f172a !important; /* slate-900 */
  border-bottom: 1px solid #1e293b;
}

/* Code text colors */
html.dark .text-gray-300,
html.dark pre .text-gray-300 {
  color: #cbd5e1 !important;
}

html.dark pre,
html.dark code {
  color: #e2e8f0 !important;
}

/* Syntax highlighting adjustments for dark mode */
/* NOTE: html.dark pre background is set above in CODE BLOCK DARK MODE section */
/* Keeping consistent slate-950 (#020617) for proper contrast */

/* Ensure code blocks in cards look good */
html.dark div[class*="bg-gray-900"] {
  background-color: #0f172a !important;
}

html.dark div[class*="bg-gray-800"] {
  background-color: #1e293b !important;
}

/* ============================================
   DEBUG: VISUAL INDICATOR
   ============================================ */

/* Add a subtle border in dark mode to confirm CSS is working */
html.dark body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899);
  z-index: 9999;
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  .dark-mode-toggle,
  html.dark body::before {
    display: none !important;
  }
  
  body {
    background: white !important;
    color: black !important;
  }
}

/* ============================================
   CATEGORY CARDS & PRICING DARK MODE FIXES
   ============================================ */

/* Category cards in dark mode */
.dark .bg-indigo-50,
.dark .bg-purple-50,
.dark .bg-blue-50,
.dark .bg-emerald-50,
.dark .bg-amber-50,
.dark .bg-pink-50,
.dark .bg-teal-50,
.dark .bg-rose-50,
.dark .bg-gray-50,
.dark .bg-gray-100 {
  background-color: rgb(31 41 55) !important; /* gray-800 */
}

/* ============================================
   FILTER BUTTONS DARK MODE
   ============================================ */

/* Active filter button (indigo) - matches "All" button behavior */
.dark .category-btn.bg-indigo-600 {
  background-color: rgb(79 70 229) !important; /* indigo-600 */
  color: rgb(255 255 255) !important; /* white text */
}

/* Inactive filter button - subtle gray in dark mode */
.dark .category-btn.bg-gray-100 {
  background-color: rgb(55 65 81) !important; /* gray-700 */
  color: rgb(209 213 219) !important; /* gray-300 */
}

/* Inactive filter button hover */
.dark .category-btn.bg-gray-100:hover {
  background-color: rgb(75 85 99) !important; /* gray-600 */
  color: rgb(243 244 246) !important; /* gray-100 */
}

/* White cards in dark mode */
.dark .bg-white {
  background-color: rgb(31 41 55) !important; /* gray-800 */
}

/* Ensure text on dark cards is light */
.dark .bg-gray-800 h3,
.dark .bg-gray-800 p,
.dark .bg-gray-800 span,
.dark .bg-gray-900 h3,
.dark .bg-gray-900 p,
.dark .bg-gray-900 span {
  color: rgb(243 244 246) !important; /* gray-100 */
}

/* List items in dark mode */
.dark ul li,
.dark .text-gray-600,
.dark .text-gray-500 {
  color: rgb(209 213 219) !important; /* gray-300 */
}

/* Dark button text */
.dark .bg-gray-900,
.dark .bg-gray-800 {
  color: white !important;
}

/* Checkmark list items */
.dark .text-green-600,
.dark .text-green-500 {
  color: rgb(74 222 128) !important; /* green-400 */
}

/* ============================================
   CONSOLIDATED DARK MODE FIXES - Carla's Review March 2026
   ============================================ */

/* --- 1. CATEGORY CARDS (index.html) --- */
/* Gradient category cards - override to slate-900 with subtle borders */
.dark .bg-gradient-to-br.from-blue-50.to-indigo-50,
.dark .bg-gradient-to-br.from-purple-50.to-pink-50,
.dark .bg-gradient-to-br.from-orange-50.to-red-50,
.dark .bg-gradient-to-br.from-green-50.to-teal-50,
.dark .bg-gradient-to-br.from-yellow-50.to-amber-50,
.dark .bg-gradient-to-br.from-cyan-50.to-blue-50,
.dark .bg-gradient-to-br.from-emerald-50.to-green-50,
.dark .bg-gradient-to-br.from-rose-50.to-pink-50,
.dark .bg-gradient-to-br.from-slate-50.to-gray-50,
.dark .bg-gradient-to-br.from-violet-50.to-purple-50,
.dark .bg-gradient-to-br.from-amber-50.to-orange-50,
.dark .bg-gradient-to-br.from-teal-50.to-cyan-50,
.dark .bg-gradient-to-br.from-pink-50.to-rose-50,
.dark .bg-gradient-to-br.from-indigo-50.to-purple-50,
.dark .bg-gradient-to-br.from-blue-50.to-cyan-50 {
  background: #0f172a !important; /* slate-900 */
  border: 1px solid #334155 !important; /* slate-700 */
}

/* Category card text colors in dark mode */
.dark #categories .bg-gradient-to-br h3,
.dark #categories .bg-gradient-to-br p,
.dark #categories .bg-gradient-to-br span {
  color: #f8fafc !important; /* slate-50 - primary text */
}

/* Category card badges (e.g., "10 prompts") */
.dark #categories .bg-blue-100,
.dark #categories .bg-purple-100,
.dark #categories .bg-orange-100,
.dark #categories .bg-green-100,
.dark #categories .bg-yellow-100,
.dark #categories .bg-cyan-100,
.dark #categories .bg-emerald-100,
.dark #categories .bg-rose-100,
.dark #categories .bg-slate-100,
.dark #categories .bg-violet-100,
.dark #categories .bg-amber-100,
.dark #categories .bg-teal-100,
.dark #categories .bg-pink-100,
.dark #categories .bg-indigo-100 {
  background-color: #1e293b !important; /* slate-800 */
  color: #cbd5e1 !important; /* slate-300 */
}

/* --- 2. BUY BUTTON SHADOWS --- */
/* Remove colored shadows in dark mode - replace with dark shadows */
.dark .shadow-indigo-200,
.dark .shadow-lg.shadow-indigo-200,
.dark a[class*="shadow-indigo"],
.dark button[class*="shadow-indigo"],
.dark [class*="shadow-indigo-"],
.dark [class*="shadow-blue-"],
.dark [class*="shadow-purple-"] {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 
              0 4px 6px -4px rgba(0, 0, 0, 0.3) !important;
}

/* --- 3. PRICING CARD (index.html) --- */
/* Override gradient from-gray-50 to-white to slate-900 */
.dark #buy .bg-gradient-to-br.from-gray-50.to-white,
.dark #buy .from-gray-50,
.dark #buy .to-white {
  background: #0f172a !important; /* slate-900 */
  border-color: #334155 !important; /* slate-700 */
}

/* Ensure pricing card text is readable */
.dark #buy .text-gray-600 {
  color: #94a3b8 !important; /* slate-400 */
}

/* Price display stays prominent */
.dark #buy .text-indigo-600 {
  color: #818cf8 !important; /* indigo-400 - brighter for dark mode */
}

/* --- 4. CODE BLOCKS (app.html) - Already updated above, additional rules below --- */
/* Code text - brighter for readability */
.dark pre,
.dark pre code,
.dark .font-mono.text-gray-300 {
  color: #e2e8f0 !important; /* slate-200 */
}

/* "Prompt" label in code header */
.dark .text-gray-400.font-mono {
  color: #64748b !important; /* slate-500 - subtle but visible */
}

/* Scrollbar styling for code blocks in dark mode */
.dark pre::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.dark pre::-webkit-scrollbar-track {
  background: #0f172a;
}

.dark pre::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 4px;
}

.dark pre::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

/* --- 5. SAMPLE PAGE HEADER (sample.html) --- */
/* bg-white/95 backdrop-blur override to slate-900/95 */
.dark nav.bg-white\/95,
.dark nav.bg-white {
  background-color: rgba(15, 23, 42, 0.95) !important; /* slate-900/95 */
  backdrop-filter: blur(12px);
  border-color: #1e293b !important; /* slate-800 */
}

/* Header text colors */
.dark nav .text-gray-900,
.dark nav .font-bold.text-xl {
  color: #f8fafc !important; /* slate-50 */
}

.dark nav .text-gray-600 {
  color: #94a3b8 !important; /* slate-400 */
}

/* --- 6. GOOD PROMPT BACKGROUNDS (sample.html) --- */
/* bg-green-50 → emerald-900/30 with emerald-300 text */
.dark .bg-green-50\/50,
.dark .bg-green-50 {
  background-color: rgba(6, 78, 59, 0.3) !important; /* emerald-900/30 */
}

/* Good prompt text box with border */
.dark .border-green-500.bg-green-50 {
  background-color: rgba(6, 78, 59, 0.4) !important; /* emerald-900/40 */
  border-left-color: #10b981 !important; /* emerald-500 - keep border bright */
}

/* Good prompt text color */
.dark .bg-green-50 p.text-green-900,
.dark .border-green-500 p {
  color: #6ee7b7 !important; /* emerald-300 - readable on dark bg */
}

/* "GOOD PROMPT" badge */
.dark .good-badge {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
}

/* List text in good prompt sections */
.dark .bg-green-50\/50 .text-gray-600,
.dark .bg-green-50 .text-gray-600 {
  color: #94a3b8 !important; /* slate-400 */
}

.dark .bg-green-50\/50 .text-green-600,
.dark .bg-green-50 .text-green-600 {
  color: #34d399 !important; /* emerald-400 */
}

/* --- 7. LIMITED TIME OFFER (sample.html) --- */
/* Black background → slate-900 with amber/orange accent border */
.dark .bg-gray-50.rounded-2xl {
  background-color: #0f172a !important; /* slate-900 */
  border: 1px solid #1e293b; /* slate-800 base border */
}

/* Limited Time Offer accent styling */
.dark .text-amber-600 {
  color: #fbbf24 !important; /* amber-400 - brighter for dark mode */
}

/* Price display */
.dark .text-5xl.font-bold.text-gray-900 {
  color: #f8fafc !important; /* slate-50 */
}

/* Supporting text in CTA section */
.dark .bg-gray-50 .text-gray-500 {
  color: #94a3b8 !important; /* slate-400 */
}

/* Pattern Summary section indigo background */
.dark .bg-indigo-900 {
  background-color: #1e1b4b !important; /* indigo-950 - darker for better contrast */
}

.dark .bg-indigo-800\/50 {
  background-color: rgba(49, 46, 129, 0.5) !important; /* indigo-900/50 */
}

/* ============================================
   FORM INPUTS - Dark Mode (Critical Fix)
   ============================================ */

.dark input[type="text"],
.dark input[type="email"],
.dark input[type="password"],
.dark textarea,
.dark select {
  background-color: #1e293b !important; /* slate-800 */
  border-color: #475569 !important; /* slate-600 */
  color: #f1f5f9 !important; /* slate-100 */
}

.dark input::placeholder,
.dark textarea::placeholder {
  color: #94a3b8 !important; /* slate-400 */
}

/* ============================================
   FOCUS RING STYLES - Accessibility (Critical Fix)
   ============================================ */

.dark *:focus-visible {
  outline-color: #6366f1 !important; /* indigo-500 */
  ring-color: #6366f1 !important;
}

.dark input:focus,
.dark textarea:focus,
.dark select:focus {
  border-color: #6366f1 !important; /* indigo-500 */
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3) !important;
}

/* ============================================
   LINK HOVER STATES - Dark Mode (Critical Fix)
   ============================================ */

.dark a:hover {
  color: #818cf8 !important; /* indigo-400 */
}

.dark a.text-blue-600:hover,
.dark a.text-indigo-600:hover {
  color: #818cf8 !important; /* indigo-400 */
}