/*
  Theme CSS for dark and light mode. 
  Light: white/ivory backgrounds, dark text. 
  Dark: dark backgrounds, light text. 
*/
:root {
  --dark-purple: #715f69;
  --light-red: #e2a599;
  --accent-blue: #90acd1;

  --dark-bg: #181a1b;
  --dark-border: #333;
  --dark-card: #23272b;
  --dark-primary: #66b3ff;
  --dark-text-color: #f1f1f1;
  --dark-title-color: #f1f1f1;

  --light-bg: #fffaf3;
  --light-border: #f1f1f1;
  --light-card: #ffffff;
  --light-primary: #007bff;
  --light-text-color: #222;
  --light-title-color: #222222;

  --black: #000;
  --white: #fff;

  --transition: background 0.3s, color 0.3s;
}

body.theme-light {
  --back-top-arrow-color: var(--white);
  --back-top-color: var(--accent-blue);
  --border-color: var(--light-border);
  --nav-scrolled-bg-color: var(--white);
  --nav-text-color: var(--black);
  --primary: var(--light-primary);
  --text-color: var(--light-text-color);
  --title-color: var(--light-title-color);
  background: var(--light-bg);
  color: var(--light-text-color);
  transition: var(--transition);
}

body.theme-dark {
  --back-top-arrow-color: var(--dark-bg);
  --back-top-color: var(--accent-blue);
  --border-color: var(--dark-border);
  --nav-scrolled-bg-color: var(--black);
  --nav-text-color: var(--white);
  --primary: var(--dark-primary);
  --text-color: var(--dark-text-color);
  --title-color: var(--dark-title-color);
  background: var(--dark-bg);
  color: var(--dark-text-color);
  transition: var(--transition);
}

.theme-dark .header-scrolled .container .row nav .nav-menu .nav-head a {
  --nav-text-color: var(--white);
}

.theme-light .header-scrolled .container .row nav .nav-menu .nav-head a {
  --nav-text-color: var(--black);
}

.theme-light .card,
.theme-light .flip-card {
  background: var(--light-card);
  color: var(--light-text-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.theme-dark .card,
.theme-dark .flip-card {
  background: var(--dark-card);
  color: var(--dark-text-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.theme-light .section-title h2,
.theme-light h2,
.theme-light h3,
.theme-light h4,
.theme-light h5 {
  color: var(--primary);
}
.theme-dark .section-title h2,
.theme-dark h2,
.theme-dark h3,
.theme-dark h4,
.theme-dark h5 {
  color: var(--primary);
}

.theme-toggle-btn {
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  z-index: 9999;
  background: var(--primary);
  color: var(--white);
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: background 0.3s;
}
.theme-toggle-btn:focus {
  outline: 2px solid var(--white);
}

.theme-light .footer-area {
  background-color: var(--light-bg);
  color: var(--light-text-color);
}

.theme-dark .footer-area {
  background-color: var(--dark-bg);
  color: var(--dark-text-color);
}