/* Dark Mode Styles */
:root {
  --bg-color: #fdfdfd;
  --text-color: #111;
  --link-color: #2a7ae2;
  --link-hover-color: #1756a9;
  --border-color: #e8e8e8;
  --code-bg: #f5f5f5;
  --header-bg: #424242;
  --header-text: #fff;
  --grey-color: #828282;
  --grey-color-light: #e8e8e8;
  --grey-color-dark: #424242;
  transition: background-color 0.3s ease, color 0.3s ease;
}

[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #e8e8e8;
  --link-color: #58a6ff;
  --link-hover-color: #79c0ff;
  --border-color: #30363d;
  --code-bg: #0d1117;
  --header-bg: #0d1117;
  --header-text: #e8e8e8;
  --grey-color: #8b949e;
  --grey-color-light: #30363d;
  --grey-color-dark: #c9d1d9;
}

/* Apply variables to elements */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s ease, color 0.3s ease;
}

a {
  color: var(--link-color);
}

a:hover {
  color: var(--link-hover-color);
}

.site-header {
  background-color: var(--header-bg);
  border-bottom: 1px solid var(--border-color);
}

.site-title,
.site-title:visited,
.site-nav .page-link {
  color: var(--header-text);
}

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

pre,
code {
  background-color: var(--code-bg);
  border: 1px solid var(--border-color);
}

.page-content {
  background-color: var(--bg-color);
}

/* Dark mode toggle button */
.theme-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--header-bg);
  border: 2px solid var(--border-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  transition: transform 0.3s ease, background-color 0.3s ease;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.theme-toggle:hover {
  transform: scale(1.1);
}

.theme-toggle:active {
  transform: scale(0.95);
}

/* Hide sun/moon based on theme */
[data-theme="light"] .theme-toggle .moon-icon {
  display: inline;
}

[data-theme="light"] .theme-toggle .sun-icon {
  display: none;
}

[data-theme="dark"] .theme-toggle .moon-icon {
  display: none;
}

[data-theme="dark"] .theme-toggle .sun-icon {
  display: inline;
}

/* Smooth transitions for all themed elements */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Override minima's hard-coded colors */
.site-header,
.site-footer {
  background-color: var(--header-bg) !important;
}

.post-link {
  color: var(--text-color);
}

.post-meta {
  color: var(--grey-color);
}

blockquote {
  border-left-color: var(--grey-color-light);
  color: var(--grey-color);
}

table {
  border: 1px solid var(--border-color);
}

table th,
table td {
  border: 1px solid var(--border-color);
}