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

/* ========================================
   🌞 DAY THEME - STANDALONE
   ======================================== */
html[data-theme="day"] {
  /* 📋 DAY COLORS */
  --day-color-1: #ffffff; /* Primary White */
  --day-color-2: #fff2ee; /* Background Light */
  --day-color-3: #333333; /* Dark Text */
  --day-color-4: #cc3377; /* Primary Accent */
  --day-color-5: #888888; /* Medium Gray */
  --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: #ffffff; /* Primary White */
  --night-color-2: #000000; /* Background Dark */
  --night-color-3: #333333; /* Dark Text */
  --night-color-4: #8b5cf6; /* Primary Accent */
  --night-color-5: #cccccc; /* Light Text for Dark BG */
  --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

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

/* 🛠️ 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);
}