/* 🎨 Completely Separate Day & Night Theme System */

/* ========================================
   🌞 DAY THEME - STANDALONE
   ======================================== */
html[data-theme="day"] {
  /* 📋 DAY COLORS */
  --day-color-1: #ffffff; /* Card Colour */
  --day-color-2: #fff2ee; /* Background Colour */
  --day-color-3: #333333; /* Text Colour */
  --day-color-4: #cc3377; /* Primary Accent */
  --day-color-5: #333333; /* Heading Text */
  --day-color-6: #777777; /* Light Gray */
  --day-color-7: rgba(0, 0, 0, 0.05); /* Shadow */

  /* 🎯 DAY UI MAPPING */
  --bg-gradient: linear-gradient(
    135deg,
    var(--day-color-2),
    var(--day-color-2)
  );
  --text-color: var(--day-color-5);
  --accent-color: var(--day-color-4);
  --primary-color: var(--day-color-4);
  --hover-color: var(--day-color-4);
  --button-text: var(--day-color-1);
  --card-bg: var(--day-color-1);
  --card-text: var(--day-color-3);
  --card-hover: var(--day-color-1);
  --input-bg: var(--day-color-1);
  --input-text: var(--day-color-3);
  --footer-text: var(--day-color-6);
}

/* ========================================
   🌙 NIGHT THEME - STANDALONE
   ======================================== */
html[data-theme="night"] {
  /* 📋 NIGHT COLORS */
  --night-color-1: #313030; /* Card Colour */
  --night-color-2: #000000; /* Background Colour */
  --night-color-3: #ffffff; /* Text Colour */
  --night-color-4: #8b5cf6; /* Primary Accent */
  --night-color-5: #ffffff; /* Heading Text */
  --night-color-6: #888888; /* Footer Text for Dark BG */
  --night-color-7: rgba(255, 255, 255, 0.05); /* Shadow */

  /* 🎯 NIGHT UI MAPPING */
  --bg-gradient: linear-gradient(
    135deg,
    var(--night-color-2),
    var(--night-color-2)
  );
  --text-color: var(--night-color-5);
  --accent-color: var(--night-color-4);
  --primary-color: var(--night-color-4);
  --hover-color: var(--night-color-4);
  --button-text: var(--night-color-1);
  --card-bg: var(--night-color-1);
  --card-text: var(--night-color-3);
  --card-hover: var(--night-color-1);
  --input-bg: var(--night-color-1);
  --input-text: var(--night-color-3);
  --footer-text: var(--night-color-6);
}

/* ========================================
   📖 QUICK REFERENCE GUIDE
   ======================================== 

   🌞 DAY THEME (--day-color-X):
   1: Card backgrounds, buttons (white)
   2: Page background (cream)
   3: Card text (dark gray)
   4: Accent color (magenta)
   5: Body text (medium gray)
   6: Footer text (light gray)
   7: Box shadows

   🌙 NIGHT THEME (--night-color-X):
   1: Card backgrounds, buttons (white)
   2: Page background (black)
   3: Card text (dark gray)
   4: Accent color (purple)
   5: Body text (light gray for dark bg)
   6: Footer text (medium gray for dark bg)
   7: Box shadows

   ======================================== */

html[data-theme="night"] .text-secondary {
  color: var(--night-color-6);
}

/* ========================================
   FOOTER STYLING - [THEME AWARE]
   ======================================== */

/* Footer Base Styling */
footer {
  background-color: var(--card-bg) !important;
  color: var(--card-text);
  border-top: 1px solid var(--card-hover);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

footer a {
  color: var(--accent-color);
  transition: color 0.3s ease;
}

footer a:hover {
  color: var(--hover-color);
}

footer strong {
  color: var(--accent-color);
}

footer .text-gray-400,
footer .text-gray-600 {
  color: var(--card-text) !important;
}

/* 🛠️ Utility Classes - Theme Independent */
html[data-theme="day"] .bg-primary {
  background-color: var(--day-color-1);
}
html[data-theme="day"] .bg-secondary {
  background-color: var(--day-color-2);
}
html[data-theme="day"] .bg-accent {
  background-color: var(--day-color-4);
}
html[data-theme="day"] .text-primary {
  color: var(--day-color-3);
}
html[data-theme="day"] .text-accent {
  color: var(--day-color-4);
}
html[data-theme="day"] .text-secondary {
  color: var(--day-color-6);
}

html[data-theme="night"] .bg-primary {
  background-color: var(--night-color-1);
}
html[data-theme="night"] .bg-secondary {
  background-color: var(--night-color-2);
}
html[data-theme="night"] .bg-accent {
  background-color: var(--night-color-4);
}
html[data-theme="night"] .text-primary {
  color: var(--night-color-3);
}
html[data-theme="night"] .text-accent {
  color: var(--night-color-4);
}
html[data-theme="night"] .text-secondary {
  color: var(--night-color-6);
}