/* Theme styles for multi-theme support */

/* Define font faces */
@font-face {
  font-family: "Apple Gothic";
  src: url("../font/applegothic.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Win95";
  src: url("../font/W95FA.otf") format("opentype");
  font-display: swap;
}

/* Light theme (default) */
.theme-light {
  --background-color: #FFFFFF;
  --text-color: #000000;
  --button-background: #000000;
  --button-text: #FFFFFF;
  --menu-hover-bg: #000000;
  --menu-hover-text: #FFFFFF;
  --font-family: "Apple Gothic", sans-serif;
}

/* Dark theme */
.theme-dark {
  --background-color: #000000;
  --text-color: #FFFFFF;
  --button-background: #FFFFFF;
  --button-text: #000000;
  --menu-hover-bg: #FFFFFF;
  --menu-hover-text: #000000;
  --font-family: "Apple Gothic", sans-serif;
}

/* Win 95 theme */
.theme-silver-teal {
  --background-color: #008080;
  --text-color: #C0C0C0;
  --button-background: #C0C0C0;
  --button-text: #008080;
  --menu-hover-bg: #C0C0C0;
  --menu-hover-text: #008080;
  --font-family: "Win95", monospace;
}

/* Add more themes here in the future */

/* Additional theme-specific styling */
.theme-light button:hover,
.theme-light .button:hover {
  background-color: var(--menu-hover-bg) !important;
  color: var(--menu-hover-text) !important;
}

.theme-dark button:hover,
.theme-dark .button:hover {
  background-color: var(--menu-hover-bg) !important;
  color: var(--menu-hover-text) !important;
}

.theme-silver-teal button:hover,
.theme-silver-teal .button:hover {
  background-color: var(--menu-hover-bg) !important;
  color: var(--menu-hover-text) !important;
}

/* Style menu links to have the same hover effect as buttons in Win95 theme */
.theme-silver-teal .menu a:hover,
.theme-silver-teal .burger-menu-nav a:hover {
  background-color: var(--menu-hover-bg) !important;
  color: var(--menu-hover-text) !important;
}

/* Mobile menu styling */
.burger-menu-button.active span {
  background-color: currentColor !important;
}

/* Apply theme font to all text elements */
body,
.title,
.menu a,
.burger-menu-nav a,
.button,
.dropdown-title,
.dropdown-content,
.contact-section h2,
.contact-section label,
.contact-section button,
input,
textarea,
button {
  font-family: var(--font-family);
}

/* Ensure theme transitions are smooth */
body, a, button, .button, .title, .menu a, .burger-menu-button span {
  transition: color 0.3s ease, background-color 0.3s ease, font-family 0.3s ease;
}