/* ============================================
   THEME CONFIGURATION - CSS Variables
   Change primary-color and secondary-color to customize your theme
   ============================================ */
:root {
  /* =====================================================
     THEME COLORS - Change only these 2 values!
     ===================================================== */
  --primary-color: #295b43;
  /* Main brand color (purple) */
  --secondary-color: #295b43;
  /* Accent color (pink) */

  /* Auto-generated PRIMARY shades (from --primary-color) */
  --primary-color-light: color-mix(in srgb, var(--primary-color), white 20%);
  --primary-color-lighter: color-mix(in srgb, var(--primary-color), white 40%);
  --primary-color-dark: color-mix(in srgb, var(--primary-color), black 15%);
  --primary-color-darker: color-mix(in srgb, var(--primary-color), black 25%);
  --primary-color-bg: color-mix(in srgb, var(--primary-color), white 90%);
  --primary-color-50: color-mix(in srgb, var(--primary-color), white 95%);
  --primary-color-100: color-mix(in srgb, var(--primary-color), white 90%);

  /* Auto-generated SECONDARY shades (from --secondary-color) */
  --secondary-color-light: color-mix(in srgb, var(--secondary-color), white 20%);
  --secondary-color-dark: color-mix(in srgb, var(--secondary-color), black 15%);
  --secondary-color-bg: color-mix(in srgb, var(--secondary-color), white 90%);
}

/* ============================================
   Tailwind Purple Color Overrides
   These map Tailwind's purple-* classes to use CSS variables
   ============================================ */

/* Background Colors */
.bg-purple-50 {
  background-color: var(--primary-color-50) !important;
}

.bg-purple-100 {
  background-color: var(--primary-color-100) !important;
}

.bg-purple-200 {
  background-color: var(--primary-color-bg) !important;
}

.bg-purple-500 {
  background-color: var(--primary-color-light) !important;
}

.bg-purple-600 {
  background-color: var(--primary-color) !important;
}

.bg-purple-700 {
  background-color: var(--primary-color-dark) !important;
}

.bg-purple-800 {
  background-color: var(--primary-color-darker) !important;
}

/* Text Colors */
.text-purple-200 {
  color: var(--primary-color-bg) !important;
}

.text-purple-400 {
  color: var(--primary-color-lighter) !important;
}

.text-purple-500 {
  color: var(--primary-color-light) !important;
}

.text-purple-600 {
  color: var(--primary-color) !important;
}

.text-purple-700 {
  color: var(--primary-color-dark) !important;
}

.text-purple-800 {
  color: var(--primary-color-darker) !important;
}

/* Border Colors */
.border-purple-300 {
  border-color: var(--primary-color-lighter) !important;
}

.border-purple-400 {
  border-color: var(--primary-color-lighter) !important;
}

.border-purple-500 {
  border-color: var(--primary-color-light) !important;
}

.border-purple-600 {
  border-color: var(--primary-color) !important;
}

/* Ring Colors */
.ring-purple-200 {
  --tw-ring-color: var(--primary-color-bg) !important;
}

.ring-purple-500 {
  --tw-ring-color: var(--primary-color-light) !important;
}

/* Focus States */
.focus\:border-purple-300:focus {
  border-color: var(--primary-color-lighter) !important;
}

.focus\:border-purple-500:focus {
  border-color: var(--primary-color-light) !important;
}

.focus\:ring-purple-200:focus {
  --tw-ring-color: var(--primary-color-bg) !important;
}

.focus\:ring-purple-500:focus {
  --tw-ring-color: var(--primary-color-light) !important;
}

.focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px !important;
}

/* Hover States */
.hover\:bg-purple-500:hover {
  background-color: var(--primary-color-light) !important;
}

.hover\:bg-purple-600:hover {
  background-color: var(--primary-color) !important;
}

.hover\:bg-purple-700:hover {
  background-color: var(--primary-color-dark) !important;
}

.hover\:text-purple-200:hover {
  color: var(--primary-color-bg) !important;
}

.hover\:text-purple-700:hover {
  color: var(--primary-color-dark) !important;
}

.hover\:text-purple-800:hover {
  color: var(--primary-color-darker) !important;
}

.hover\:text-purple-900:hover {
  color: var(--primary-color-darker) !important;
}

/* Checked State */
.checked\:bg-purple-600:checked {
  background-color: var(--primary-color) !important;
}

/* Gradient Support */
.from-purple-600 {
  --tw-gradient-from: var(--primary-color) !important;
}

.to-indigo-600 {
  --tw-gradient-to: var(--secondary-color) !important;
}

/* ============================================
   Toggle Switch Styles
   ============================================ */
.toggle-checkbox:checked {
  right: 0;
  border-color: var(--primary-color);
}

.toggle-checkbox:checked+.toggle-label {
  background-color: var(--primary-color);
}

/* Hide the default checkbox */
.toggle-checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Style the label as a switch */
.toggle-label {
  position: relative;
  display: block;
  height: 24px;
  width: 44px;
  background-color: #ccc;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Create the slider */
.toggle-label::after {
  position: absolute;
  display: block;
  content: '';
  height: 20px;
  width: 20px;
  top: 2px;
  left: 2px;
  background-color: white;
  border-radius: 10px;
  transition: all 0.2s ease;
}

/* Move the slider when checked */
.toggle-checkbox:checked+.toggle-label::after {
  left: 22px;
}

/* ============================================
   Additional Theme Utilities
   ============================================ */

/* Primary button style */
.btn-primary {
  background-color: var(--primary-color);
  color: white;
}

.btn-primary:hover {
  background-color: var(--primary-color-dark);
}

/* Secondary button style */
.btn-secondary {
  background-color: var(--secondary-color);
  color: white;
}

.btn-secondary:hover {
  background-color: var(--secondary-color-dark);
}

/* Text primary */
.text-theme-primary {
  color: var(--primary-color);
}

/* Background primary */
.bg-theme-primary {
  background-color: var(--primary-color);
}

.bg-theme-primary-light {
  background-color: var(--primary-color-bg);
}