/* Dark mode variables */
.dark-mode {
  --background-color: #333;
  --text-color: #f0f0f0;
  --header-background-color: #282a36;
  --header-text-color: #f8f8f2;
  --footer-background-color: #282a36;
  --footer-text-color: #f8f8f2;
  --card-background-color: #444;
  --link-color: #007acc;
  --link-hover-color: #005f99;
  --skeleton-base-color: #4a4a4a; /* Original: #4a4a4a */
  --skeleton-shine-color: #6b6b6b; /* Original: #5a5a5a, made lighter */
}

/* Light mode variables */
.light-mode {
  --background-color: #f0f0f0;
  --text-color: #333;
  --header-background-color: #fff;
  --header-text-color: #000;
  --footer-background-color: #fff;
  --footer-text-color: #000;
  --card-background-color: #fff;
  --link-color: #000;
  --link-hover-color: #333;
  --skeleton-base-color: #e0e0e0; /* Original: #e0e0e0 */
  --skeleton-shine-color: #f5f5f5; /* Original: #d0d0d0, made lighter */
}

/* Pastel mode variables */
.pastel-mode {
  --background-color: #f7e1e1;
  --text-color: #333;
  --header-background-color: #f7e1e1;
  --header-text-color: #333;
  --footer-background-color: #f7e1e1;
  --footer-text-color: #333;
  --card-background-color: #fff;
  --link-color: #333;
  --link-hover-color: #555;
  --skeleton-base-color: #f0d4d4; /* Original: #f0d4d4 */
  --skeleton-shine-color: #faeaea; /* Original: #e9c7c7, made lighter */
}

/* Eye-soothing mode variables */
.eye-soothing-mode {
  --background-color: #e0f7fa;
  --text-color: #004d40;
  --header-background-color: #e0f7fa;
  --header-text-color: #004d40;
  --footer-background-color: #e0f7fa;
  --footer-text-color: #004d40;
  --card-background-color: #fff;
  --link-color: #004d40;
  --link-hover-color: #00332e;
  --skeleton-base-color: #ccecf0; /* Original: #ccecf0 */
  --skeleton-shine-color: #e6f7f9; /* Original: #b8e1e6, made lighter */
}

/* Solarized Dark mode variables */
.solarized-dark-mode {
  --background-color: #002b36;
  --text-color: #839496;
  --header-background-color: #073642;
  --header-text-color: #93a1a1;
  --footer-background-color: #073642;
  --footer-text-color: #93a1a1;
  --card-background-color: #073642;
  --link-color: #268bd2;
  --link-hover-color: #2aa198;
  --skeleton-base-color: #073642; /* Original: #073642 */
  --skeleton-shine-color: #0e4f60; /* Original: #08404f, made lighter */
}

/* Solarized Light mode variables */
.solarized-light-mode {
  --background-color: #fdf6e3;
  --text-color: #657b83;
  --header-background-color: #eee8d5;
  --header-text-color: #586e75;
  --footer-background-color: #eee8d5;
  --footer-text-color: #586e75;
  --card-background-color: #eee8d5;
  --link-color: #268bd2;
  --link-hover-color: #2aa198;
  --skeleton-base-color: #eee8d5; /* Original: #eee8d5 */
  --skeleton-shine-color: #fbf3e0; /* Original: #e0d8c5, made lighter */
}

/* Monokai mode variables */
.monokai-mode {
  --background-color: #272822;
  --text-color: #f8f8f2;
  --header-background-color: #383830;
  --header-text-color: #f8f8f2;
  --footer-background-color: #383830;
  --footer-text-color: #f8f8f2;
  --card-background-color: #383830;
  --link-color: #66d9ef;
  --link-hover-color: #a6e22e;
  --skeleton-base-color: #3e3d32; /* Original: #3e3d32 */
  --skeleton-shine-color: #5a584b; /* Original: #4c4b3f, made lighter */
}

/* Dracula mode variables */
.dracula-mode {
  --background-color: #282a36;
  --text-color: #f8f8f2;
  --header-background-color: #44475a;
  --header-text-color: #f8f8f2;
  --footer-background-color: #44475a;
  --footer-text-color: #f8f8f2;
  --card-background-color: #44475a;
  --link-color: #bd93f9;
  --link-hover-color: #ff79c6;
  --skeleton-base-color: #3a3c4e; /* Original: #3a3c4e */
  --skeleton-shine-color: #555870; /* Original: #4e5066, made lighter */
}

/* Gruvbox Dark mode variables */
.gruvbox-dark-mode {
  --background-color: #282828;
  --text-color: #ebdbb2;
  --header-background-color: #3c3836;
  --header-text-color: #ebdbb2;
  --footer-background-color: #3c3836;
  --footer-text-color: #ebdbb2;
  --card-background-color: #3c3836;
  --link-color: #fabd2f;
  --link-hover-color: #fe8019;
  --skeleton-base-color: #3c3836; /* Original: #3c3836 */
  --skeleton-shine-color: #5a524c; /* Original: #504945, made lighter */
}

/* Nord mode variables */
.nord-mode {
  --background-color: #2e3440;
  --text-color: #d8dee9;
  --header-background-color: #3b4252;
  --header-text-color: #d8dee9;
  --footer-background-color: #3b4252;
  --footer-text-color: #d8dee9;
  --card-background-color: #3b4252;
  --link-color: #88c0d0;
  --link-hover-color: #81a1c1;
  --skeleton-base-color: #3b4252; /* Original: #3b4252 */
  --skeleton-shine-color: #4c566a; /* Original: #434c5e, made lighter */
}

/* One Dark mode variables */
.one-dark-mode {
  --background-color: #282c34;
  --text-color: #abb2bf;
  --header-background-color: #21252b;
  --header-text-color: #abb2bf;
  --footer-background-color: #21252b;
  --footer-text-color: #abb2bf;
  --card-background-color: #21252b;
  --link-color: #61afef;
  --link-hover-color: #528bff;
  --skeleton-base-color: #2c313a; /* Original: #2c313a */
  --skeleton-shine-color: #3e4451; /* Original: #353b45, made lighter */
}

/* Material Dark mode variables */
.material-dark-mode {
    --background-color: #263238;
    --text-color: #eceff1;
    --header-background-color: #37474f;
    --header-text-color: #eceff1;
    --footer-background-color: #37474f;
    --footer-text-color: #eceff1;
    --card-background-color: #37474f;
    --link-color: #80cbc4;
    --link-hover-color: #4db6ac;
    --skeleton-base-color: #37474f; /* Original: #37474f */
    --skeleton-shine-color: #546e7a; /* Original: #455a64, made lighter */
  }
  
  /* Material Light mode variables */
  .material-light-mode {
    --background-color: #fafafa;
    --text-color: #212121;
    --header-background-color: #ffffff;
    --header-text-color: #212121;
    --footer-background-color: #ffffff;
    --footer-text-color: #212121;
    --card-background-color: #ffffff;
    --link-color: #03a9f4;
    --link-hover-color: #0288d1;
    --skeleton-base-color: #eeeeee; /* Original: #eeeeee */
    --skeleton-shine-color: #f5f5f5; /* Original: #e0e0e0, made lighter */
  }

/* Toast notification styles */
.theme-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  opacity: 0;
  transition: opacity 0.5s, transform 0.5s;
  z-index: 1000;
}
.theme-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Theme change animation */
body {
  transition: background-color 0.5s, color 0.5s;
}