/* Oproto Custom Color Scheme */
/* Professional blue palette for MVP rebrand */

:root {
  /* Primary Colors */
  --color-primary: #2563EB;      /* blue-600 */
  --color-secondary: #0EA5E9;    /* sky-500 */
  
  /* Backgrounds */
  --color-bg-page: #F8FAFC;      /* gray-50 */
  --color-bg-card: #FFFFFF;      /* white */
  
  /* Text */
  --color-text-primary: #111827; /* gray-900 */
  --color-text-secondary: #6B7280; /* gray-500 */
  
  /* Gradients */
  --gradient-hero: linear-gradient(90deg, #2563EB 0%, #0EA5E9 100%);
}

/* Override DaisyUI theme variables for light mode */
[data-theme="light"] {
  --p: 217 91% 60%;  /* #2563EB - Primary blue */
  --s: 199 89% 48%;  /* #0EA5E9 - Secondary sky blue */
  --b1: 210 40% 98%; /* #F8FAFC - Base background */
  --bc: 220 13% 9%;  /* #111827 - Base content (text) */
}

/* Override DaisyUI theme variables for dark mode */
[data-theme="dark"] {
  --p: 217 91% 60%;  /* #2563EB - Keep same primary */
  --s: 199 89% 48%;  /* #0EA5E9 - Keep same secondary */
  /* Keep default dark mode backgrounds */
}

/* Hero gradient background utility class */
.hero-gradient {
  background: linear-gradient(90deg, #2563EB 0%, #0EA5E9 100%);
}

/* Override any existing purple gradient classes */
.bg-gradient-to-br.from-primary.to-secondary {
  background: linear-gradient(90deg, #2563EB 0%, #0EA5E9 100%) !important;
}

.bg-gradient-to-r.from-primary.to-secondary {
  background: linear-gradient(90deg, #2563EB 0%, #0EA5E9 100%) !important;
}

/* Ensure text is readable on gradient backgrounds */
.hero-gradient * {
  color: white;
}

/* Additional utility classes for consistency */
.text-primary-custom {
  color: var(--color-primary);
}

.text-secondary-custom {
  color: var(--color-secondary);
}

.bg-page {
  background-color: var(--color-bg-page);
}

.bg-card {
  background-color: var(--color-bg-card);
}

/* Fix alert banner rounded corners */
.alert {
  border-radius: 0.5rem !important;
}

/* Fix alert banner at top of page (no bottom margin, no top rounded corners) */
.alert.mb-0 {
  border-radius: 0 !important;
}

/* Fix toggle switch visibility and make it look actionable */
.toggle {
  --tglbg: #E5E7EB;
  background-color: #E5E7EB;
  border: 2px solid #D1D5DB;
  cursor: pointer;
  transition: all 0.3s ease;
}

.toggle:hover {
  border-color: #9CA3AF;
}

.toggle:checked {
  --tglbg: #2563EB;
  background-color: #2563EB;
  border-color: #2563EB;
}

.toggle:checked:hover {
  background-color: #1D4ED8;
  border-color: #1D4ED8;
}

/* Dark mode toggle styling */
[data-theme="dark"] .toggle {
  --tglbg: #4B5563;
  background-color: #4B5563;
  border: 2px solid #6B7280;
}

[data-theme="dark"] .toggle:hover {
  border-color: #9CA3AF;
}

[data-theme="dark"] .toggle:checked {
  --tglbg: #2563EB;
  background-color: #2563EB;
  border-color: #2563EB;
}

[data-theme="dark"] .toggle:checked:hover {
  background-color: #1D4ED8;
  border-color: #1D4ED8;
}

/* Fix recommended badge visibility in both modes */
.badge-secondary {
  background-color: #0EA5E9 !important;
  color: white !important;
  border-color: #0EA5E9 !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Ensure badge is visible in light mode on light backgrounds */
[data-theme="light"] .badge-secondary {
  background-color: #0EA5E9 !important;
  color: white !important;
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.4) !important;
}

/* Ensure badge is visible in dark mode */
[data-theme="dark"] .badge-secondary {
  background-color: #0EA5E9 !important;
  color: white !important;
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.6) !important;
}

/* Ensure pricing labels are visible in dark mode */
[data-theme="dark"] #monthly-label,
[data-theme="dark"] #annual-label {
  color: hsl(var(--bc));
}

/* Fix hero section alert styling in dark mode */
[data-theme="dark"] .hero-gradient .alert {
  background-color: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: white !important;
}

[data-theme="dark"] .hero-gradient .alert svg {
  stroke: white !important;
}

/* Ensure all hero gradient text is white in both modes */
.hero-gradient,
.hero-gradient * {
  color: white !important;
}

.hero-gradient .alert {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
}

.hero-gradient .alert svg {
  stroke: white;
}

/* Fix pricing card recommended badge positioning and visibility */
.card.bg-primary .badge-secondary {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Make recommended pricing card stand out in light mode */
[data-theme="light"] .card.bg-primary {
  background-color: #2563EB !important;
  color: white !important;
  border: 4px solid #2563EB !important;
}

[data-theme="light"] .card.bg-primary * {
  color: white !important;
}

[data-theme="light"] .card.bg-primary .btn-secondary {
  background-color: #0EA5E9 !important;
  color: white !important;
  border-color: #0EA5E9 !important;
}

/* Ensure pricing card text is readable in dark mode */
[data-theme="dark"] .card.bg-primary {
  background-color: hsl(var(--p)) !important;
  color: white !important;
}

[data-theme="dark"] .card.bg-primary * {
  color: white !important;
}

/* Fix button visibility on primary background in dark mode */
[data-theme="dark"] .card.bg-primary .btn-secondary {
  background-color: #0EA5E9 !important;
  color: white !important;
  border-color: #0EA5E9 !important;
}