/* Dark Mode Styles */

html.dark-mode {
  --text-primary: #e8e8e8;
  --bg-primary: #0a0e27;
  --border-color: #333333;
}

html.dark-mode body {
  background-color: #0a0e27;
  color: #e8e8e8;
}

html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6 {
  color: #e8e8e8;
}

html.dark-mode .navbar {
  background: linear-gradient(135deg, #1a2a4e 0%, #0f1b35 100%);
}

html.dark-mode .card {
  background: #1a2a4e;
  border-color: #333333;
}

html.dark-mode .footer {
  background: linear-gradient(135deg, #1a2a4e 0%, #0f1b35 100%);
}

html.dark-mode a {
  color: #00d4ff;
}

html.dark-mode a:hover {
  color: #00f0ff;
}

html.dark-mode .section {
  background-color: #0a0e27;
}

html.dark-mode .post-content {
  color: #e8e8e8;
}

html.dark-mode .post-content a {
  color: #00d4ff;
  text-decoration: underline;
}

html.dark-mode .post-meta {
  color: rgba(232, 232, 232, 0.6);
}

html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select {
  background-color: #1a2a4e;
  color: #e8e8e8;
  border-color: #333333;
}

html.dark-mode input:focus,
html.dark-mode textarea:focus,
html.dark-mode select:focus {
  border-color: #00d4ff;
  box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.2);
}

html.dark-mode .button,
html.dark-mode button {
  background-color: #16213e;
  color: #e8e8e8;
  border-color: #00d4ff;
}

html.dark-mode .button:hover,
html.dark-mode button:hover {
  background-color: #1a2a4e;
  border-color: #00f0ff;
}

html.dark-mode .comment {
  border-color: #333333;
}

html.dark-mode .widget {
  background-color: #1a2a4e;
  border-color: #333333;
}