:root {
  --background-color: #ffffff;
  --background-alt-color: #f4f5f6;
  --text-dark-color: #2A2F36;
  --text-medium-color: #2A2F36;
  --text-light-color: #6B7B8D;
  --link-color: #308ddf;
  --accent-color: #3498db;
  --border-color: #dddddd;
  --hero-background-color: #132930;
  --hero-text-color: #ffffff;
  --error-color: #D64541;
}

body.dark-mode {
  --background-color: #121212;
  --background-alt-color: #1e1e1e;
  --text-dark-color: #e0e0e0;
  --text-medium-color: #c0c0c0;
  --text-light-color: #a0a0a0;
  --link-color: #64b5f6;
  --accent-color: #42a5f5;
  --border-color: #333333;
  --hero-background-color: #0a1a20;
  --hero-text-color: #ffffff;
  --error-color: #e57373;
}

/* Apply CSS variables to elements */
body {
  background-color: var(--background-color);
  color: var(--text-medium-color);
}

/* Ensure html background matches in dark mode (covers margin gaps) */
html:has(body.dark-mode) {
  background-color: #121212;
}

/* ===== Dark mode overrides for SASS-compiled backgrounds ===== */

body.dark-mode .footer {
  background-color: var(--background-alt-color);
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
  color: var(--text-dark-color);
}

body.dark-mode a {
  color: var(--link-color);
}

/* Content sections — these all use hardcoded $background-color or $background-alt-color in SASS */
body.dark-mode .single {
  background: var(--background-alt-color) !important;
}

body.dark-mode .single-post {
  background: var(--background-color) !important;
}

body.dark-mode .post__content-wrap {
  background: var(--background-alt-color) !important;
}

body.dark-mode .post__content {
  background: var(--background-color) !important;
}

body.dark-mode .post__image-wrap {
  background: var(--background-alt-color) !important;
}

body.dark-mode .filter__container {
  background: var(--background-alt-color) !important;
}

/* Listing / blog page */
body.dark-mode .listing .post {
  background: var(--background-alt-color) !important;
}

body.dark-mode .pagination {
  background: var(--background-alt-color) !important;
}

body.dark-mode .pagination .button {
  background: var(--background-color) !important;
}

/* Tag pages and archive */
body.dark-mode .tag-page,
body.dark-mode .archive {
  background: var(--background-alt-color) !important;
}

/* Contact form */
body.dark-mode .contact-form input,
body.dark-mode .contact-form textarea,
body.dark-mode .contact-form select {
  background: var(--background-color) !important;
  color: var(--text-medium-color);
  border-color: var(--border-color);
}

/* Table rows */
body.dark-mode .single-post table tr:nth-child(2n) {
  background: var(--background-alt-color) !important;
}

body.dark-mode .single-post sup a.footnote {
  background: var(--background-alt-color) !important;
}

/* Related posts */
body.dark-mode .related-post {
  background-color: var(--background-alt-color);
  border-color: var(--border-color);
}

body.dark-mode .related-post__tag {
  background-color: var(--background-color);
  color: var(--text-medium-color);
}

/* Navigation */
body.dark-mode .menu__list__item__link {
  color: var(--text-dark-color);
}

body.dark-mode .menu__toggle__icon span,
body.dark-mode .menu__toggle__icon span:before,
body.dark-mode .menu__toggle__icon span:after {
  background-color: var(--text-dark-color);
}

body.dark-mode .menu__wrap {
  background: rgba(18, 18, 18, 0.98);
}

/* Header title */
body.dark-mode .header__title {
  color: var(--text-dark-color);
}

/* Hero section */
body.dark-mode .hero {
  background-color: var(--hero-background-color);
}

/* Tables */
body.dark-mode table th,
body.dark-mode table td {
  border-color: var(--border-color);
}

body.dark-mode table th {
  background-color: var(--background-alt-color);
}

/* Code blocks */
body.dark-mode pre,
body.dark-mode code {
  background-color: var(--background-alt-color);
  color: var(--text-medium-color);
}

/* Blockquotes */
body.dark-mode blockquote {
  border-color: var(--accent-color);
  color: var(--text-medium-color);
}

/* Buttons */
body.dark-mode .btn-outline-primary {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

body.dark-mode .btn-outline-dark {
  color: var(--text-dark-color);
  border-color: var(--text-dark-color);
}

/* Project filter */
body.dark-mode .project-filter {
  background-color: var(--background-alt-color);
}

/* Career timeline */
body.dark-mode .career-item,
body.dark-mode .timeline-item,
body.dark-mode .enhanced-timeline-content {
  background: var(--background-color) !important;
}

/* Achievement / skills */
body.dark-mode .achievement {
  background: var(--background-color) !important;
}

body.dark-mode .skills-tag {
  background: var(--background-alt-color) !important;
  color: var(--text-medium-color) !important;
  border-color: var(--border-color) !important;
}

/* Form inputs */
body.dark-mode .contact-form__input,
body.dark-mode .contact-form__textarea {
  background: var(--background-color) !important;
  color: var(--text-medium-color);
  border-color: var(--border-color);
}

/* HR */
body.dark-mode hr {
  background: var(--border-color) !important;
}

/* Career header */
body.dark-mode .enhanced-timeline-header h1 {
  color: #ffffff !important;
}

body.dark-mode .enhanced-timeline-header p {
  color: #b0b0b0 !important;
}

body.dark-mode .cv-download-btn {
  background: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  color: #ffffff !important;
}

/* Share box */
body.dark-mode .share-box a {
  color: var(--text-medium-color);
}

/* Breadcrumbs */
body.dark-mode .breadcrumbs {
  background-color: var(--background-alt-color);
}

/* Selection */
body.dark-mode ::selection {
  background: var(--accent-color);
  color: var(--background-color);
}

/* Dark mode toggle button styles are in header-controls.css */