/* Light Theme */
.light-theme {
  --text-primary: #0a0a0a;
  --text-secondary: #333333;
  --text-tertiary: #555555;

  --bg-primary: #ffffff;
  --bg-secondary: #f9f9f9;
  --bg-tertiary: #f0f0f0;

  --border-color: #e0e0e0;

  --card-bg: #fdfdfd;
  --card-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

  --header-bg: rgba(255, 255, 255, 0.95);
  --header-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

  --nav-mobile-bg: #ffffff;
  --search-container-bg: #ffffff;

  --btn-primary-bg: var(--primary-600);
  --btn-primary-text: white;
  --btn-primary-hover-bg: var(--primary-700);

  --btn-secondary-bg: #e0e0e0;
  --btn-secondary-text: #222222;
  --btn-secondary-hover-bg: #d0d0d0;

  --tag-bg: #f2f2f2;
  --tag-text: #111111;

  --mission-goal-bg: #ffffff;
  --contact-card-bg: #ffffff;

  --footer-bg: #f9f9f9;
  --footer-border: #e0e0e0;

  color: var(--text-primary);
  background-color: var(--bg-primary);
}

/* Dark Theme */
.dark-theme {
  --text-primary: #f5f5f5;
  --text-secondary: #cccccc;
  --text-tertiary: #999999;

  --bg-primary: #111111;
  --bg-secondary: #1c1c1c;
  --bg-tertiary: #2a2a2a;

  --border-color: #333333;

  --card-bg: #1e1e1e;
  --card-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3),
    0 4px 6px -4px rgba(0, 0, 0, 0.2);

  --header-bg: rgba(17, 24, 39, 0.8);
  --header-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);

  --nav-mobile-bg: #1c1c1c;
  --search-container-bg: #1c1c1c;

  --btn-primary-bg: var(--primary-600);
  --btn-primary-text: white;
  --btn-primary-hover-bg: var(--primary-700);

  --btn-secondary-bg: #333333;
  --btn-secondary-text: #f0f0f0;
  --btn-secondary-hover-bg: #444444;

  --tag-bg: #333333;
  --tag-text: #cccccc;

  --mission-goal-bg: #1c1c1c;
  --contact-card-bg: #1c1c1c;

  --footer-bg: #111111;
  --footer-border: #1a1a1a;

  color: var(--text-primary);
  background-color: var(--bg-primary);
}

/* Theme-specific elements */
.header {
  background-color: var(--header-bg);
  box-shadow: var(--header-shadow);
}

.logo:hover {
  color: var(--primary-600);
}

.theme-toggle,
.search-toggle {
  color: var(--text-primary);
}

.theme-toggle:hover,
.search-toggle:hover {
  background-color: var(--bg-tertiary);
}

.menu-bar {
  background-color: var(--text-primary);
}

.nav-mobile {
  background-color: var(--nav-mobile-bg);
  box-shadow: var(--card-shadow);
}

.search-container {
  background-color: var(--search-container-bg);
  box-shadow: var(--card-shadow);
}

.search-input {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

.search-button {
  background-color: var(--btn-primary-bg);
  color: white;
}

.category-card {
  background-color: var(--card-bg);
  box-shadow: var(--card-shadow);
}

.resource-front,
.resource-back {
  background-color: var(--card-bg);
  box-shadow: var(--card-shadow);
}

.resource-tag {
  background-color: var(--tag-bg);
  color: var(--tag-text);
}

.resource-link {
  color: var(--primary-600);
}

.resource-link:hover {
  color: var(--primary-700);
}

.update-dot {
  background-color: var(--primary-600);
  border: 2px solid var(--bg-primary);
}

.update-tag {
  background-color: var(--tag-bg);
  color: var(--tag-text);
}

.view-all-btn {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}

.view-all-btn:hover {
  background-color: var(--btn-primary-hover-bg);
}

.social-link {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

.social-link:hover {
  background-color: var(--primary-600);
  color: white;
}

.skill-tag {
  background-color: var(--tag-bg);
  color: var(--tag-text);
}

.mission-goal {
  background-color: var(--mission-goal-bg);
  box-shadow: var(--card-shadow);
}

.contact-card {
  background-color: var(--contact-card-bg);
  box-shadow: var(--card-shadow);
}

.filter-btn {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
}

.filter-btn:hover:not(.active) {
  background-color: var(--btn-secondary-hover-bg);
}

.back-link:hover {
  color: var(--primary-600);
}

.footer {
  background-color: var(--footer-bg);
  border-top: 1px solid var(--footer-border);
}

/* Theme toggle specific */
.light-theme .dark-icon {
  display: none;
}

.dark-theme .light-icon {
  display: none;
}