/* theme.css */

/* =============== Base =============== */
body {
  font-family: system-ui, sans-serif;
  transition: background-color 0.3s, color 0.3s;
}

.theme-toggle {
  cursor: pointer;
  transition: color 0.2s, background-color 0.2s;
}

/* =============== Themes =============== */
body.dark {
  background-color: #1f2937;
  color: #e5e7eb;
}

body.light {
  background-color: #f3f4f6;
  color: #1f2937;
}

/* =============== Cards & Sections =============== */
.card,
.project-card,
.about-card,
.project-overview {
  border-radius: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  padding: 1.5rem;
  transition: background-color 0.3s, color 0.3s;
}

body.dark .card,
body.dark .project-card,
body.dark .about-card,
body.dark .project-overview {
  background-color: #2d3748;
  border: 1px solid #4a5568;
  color: #e5e7eb;
}

body.light .card,
body.light .project-card,
body.light .about-card,
body.light .project-overview {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  color: #1f2937;
}

/* =============== Buttons =============== */
.button,
.docs-button,
.project-link {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-weight: 500;
  transition: background-color 0.3s, color 0.3s;
}

body.dark .project-link {
  background-color: #374151;
  color: #ffffff;
}

body.dark .project-link:hover {
  background-color: #4b5563;
}

body.light .project-link {
  background-color: #f9fafb;
  color: #1f2937;
  border: 1px solid #e5e7eb;
}

body.light .project-link:hover {
  background-color: #e5e7eb;
}

body.dark .docs-button {
  background-color: #2563eb;
  color: white;
}

body.dark .docs-button:hover {
  background-color: #1d4ed8;
}

body.light .docs-button {
  background-color: #3b82f6;
  color: white;
}

body.light .docs-button:hover {
  background-color: #2563eb;
}

/* =============== Header/Footer =============== */
header,
footer {
  transition: background-color 0.3s, color 0.3s;
}

body.dark header,
body.dark footer {
  background-color: #1a202c;
  color: #e2e8f0;
}

body.light header,
body.light footer {
  background-color: #ffffff;
  color: #4b5563;
}