/* Base theme (default or fallback) */
:root {
  --primary-color: #2563eb; /* blue-600 */
  --secondary-color: #1d4ed8; /* blue-700 */
  --text-color: #374151; /* gray-800 */
  --bg-color-light: #f9fafb; /* gray-50 */
  --bg-color-dark: #ffffff; /* white */
  --card-bg: #e5e7eb; /* gray-200 */
  --card-shadow: rgba(0, 0, 0, 0.1); /* shadow-lg */
}

/* Spring Theme */
body.theme-spring {
  --primary-color: #F87DA8; /* Light Pink */
  --secondary-color: #DDA0DD; /* Lavender */
  --text-color: #58505c;
  --bg-color-light: #F9F2F9; /* Very light pink */
  --bg-color-dark: #FFF7F9;
  --card-bg: #E0FFE0; /* Mint Green */
  --card-shadow: rgba(221, 160, 221, 0.3);
}

/* Summer Theme */
body.theme-summer {
  --primary-color: #FF7F50; /* Coral */
  --secondary-color: #20B2AA; /* Light Sea Green / Turquoise */
  --text-color: #333;
  --bg-color-light: #FFF8DC; /* Cornsilk */
  --bg-color-dark: #FFFFFF;
  --card-bg: #FFD700; /* Gold / Sunflower Yellow */
  --card-shadow: rgba(255, 127, 80, 0.3);
}

/* Autumn (Fall) Theme */
body.theme-autumn {
  --primary-color: #CC5500; /* Burnt Orange */
  --secondary-color: #8B0000; /* Deep Red */
  --text-color: #4B3F38;
  --bg-color-light: #FCF5ED; /* Light Cream */
  --bg-color-dark: #FDFDF7;
  --card-bg: #DAA520; /* Goldenrod / Mustard Yellow */
  --card-shadow: rgba(204, 85, 0, 0.3);
}

/* Winter Theme */
body.theme-winter {
  --primary-color: #4682B4; /* Steel Blue / Ocean Blue */
  --secondary-color: #000080; /* Deep Navy */
  --text-color: #2C3E50;
  --bg-color-light: #F0F8FF; /* Alice Blue / Snow White */
  --bg-color-dark: #FFFFFF;
  --card-bg: #E0FFFF; /* Light Cyan / Silver hint */
  --card-shadow: rgba(70, 130, 180, 0.3);
}

/* Apply custom properties to Tailwind classes for dynamic theming */
.bg-blue-600 { background-color: var(--primary-color) !important; }
.bg-blue-700 { background-color: var(--secondary-color) !important; }
.text-blue-600 { color: var(--primary-color) !important; }
.text-gray-800 { color: var(--text-color) !important; }
.bg-gray-50 { background-color: var(--bg-color-light) !important; }
.bg-white { background-color: var(--bg-color-dark) !important; }
.bg-gray-200 { background-color: var(--card-bg) !important; }
.shadow-lg { box-shadow: 0 10px 15px -3px var(--card-shadow), 0 4px 6px -2px var(--card-shadow) !important; }

/* NOTE: If you are using other specific Tailwind color classes (e.g., text-gray-700, bg-gray-100, text-blue-800, etc.)
   that you want to be themed, you'll need to add !important overrides for them here as well,
   mapping them to your CSS variables. For instance:
   .text-gray-700 { color: var(--text-color-secondary, #4a5568) !important; }
   .bg-gray-100 { background-color: var(--bg-color-light-alt, #f7fafc) !important; }
*/
.text-blue-800 { color: var(--primary-color) !important; /* Made this theme-aware for the H2 */ }
.text-gray-600 { color: var(--text-color) !important; /* Made this theme-aware for the H2 description */ }
.hover\:bg-blue-50:hover { background-color: var(--bg-color-light) !important; /* Adjust if a specific lighter primary is needed */ }


/* WhatsApp Icon Styling */
#whatsapp-icon {
  position: fixed;
  top: 50%;
  right: 15px;
  z-index: 1000;
  transform: translateY(-50%);
  animation: swing 2s infinite ease-in-out;
}
@keyframes swing {
  0%, 100% {
    transform: translateY(-50%) rotate(0deg);
  }
  50% {
    transform: translateY(-50%) rotate(15deg);
  }
}

/* Theme Toggle Icon Styling */
#theme-toggle-icon {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1001; /* Above WhatsApp icon */
  cursor: pointer;
  font-size: 2rem; /* Larger icon */
  color: white; /* Default color, can be themed */
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  transition: background-color 0.3s ease, transform 0.3s ease;
}
#theme-toggle-icon:hover {
  background-color: rgba(0, 0, 0, 0.6);
  transform: scale(1.1);
}