/* Dark Mode Styles */
:root {
  /* Light Mode Colors */
  --color-primary: #2c3e50;
  --color-secondary: #4b6584;
  --color-accent: #0984e3;
  --color-light: #f5f5f5;
  --color-dark: #2d3436;
  --color-gray: #b2bec3;
  --color-border: #e8e8e8;
  --color-bg: #ffffff;
  --color-text: #2d3436;
  
  /* For transitions */
  --transition-time: 0.3s;
}

.dark-mode {
  /* Dark Mode Colors */
  --color-primary: #dfe6e9;
  --color-secondary: #b2bec3;
  --color-accent: #74b9ff;
  --color-light: #2d3436;
  --color-dark: #f5f5f5;
  --color-gray: #636e72;
  --color-border: #4b6584;
  --color-bg: #2c3e50;
  --color-text: #dfe6e9;
}

/* Apply dark mode styles */
.dark-mode body {
  background-color: var(--color-bg);
  color: var(--color-text);
}

.dark-mode .site-header {
  /* Invert the notepad image for dark mode */
  filter: brightness(0.85) contrast(1.2);
}

.dark-mode .home {
  /* Adjust home background for dark mode */
  filter: brightness(0.85) contrast(1.2);
}

.dark-mode .post-content {
  color: var(--color-text);
}

.dark-mode .post-title,
.dark-mode h1, 
.dark-mode h2, 
.dark-mode h3, 
.dark-mode h4, 
.dark-mode h5, 
.dark-mode h6 {
  color: var(--color-primary);
}

.dark-mode .site-title,
.dark-mode .page-link {
  color: var(--color-primary);
}

.dark-mode .post-meta {
  color: var(--color-secondary);
}

.dark-mode .post-list li {
  border-bottom-color: var(--color-border);
}

.dark-mode .post-link {
  color: var(--color-primary);
}

.dark-mode .post-link:hover {
  color: var(--color-accent);
}

.dark-mode .site-footer {
  background-color: var(--color-light);
}

.dark-mode .post-navigation {
  border-top-color: var(--color-border);
}

.dark-mode .previous-post a,
.dark-mode .next-post a {
  background-color: var(--color-light);
  color: var(--color-primary);
}

.dark-mode .previous-post a:hover,
.dark-mode .next-post a:hover {
  background-color: var(--color-accent);
  color: var(--color-dark);
}

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

/* Dark Mode Toggle Button */
.theme-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--color-accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  transition: all var(--transition-time) ease;
  border: none;
  outline: none;
}

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

.theme-toggle svg {
  width: 22px;
  height: 22px;
}

/* Transition effect for switching modes */
body, 
.site-header, 
.home, 
.site-footer,
.post-navigation,
.previous-post a, 
.next-post a,
.site-title,
.page-link,
.post-meta,
.post-link,
h1, h2, h3, h4, h5, h6 {
  transition: all var(--transition-time) ease;
}

/* Chat widget dark mode adjustments */
.dark-mode langflow-chat {
  --lf-chat-bg-color: var(--color-bg);
  --lf-chat-text-color: var(--color-text);
}