/* Dark mode styles */
[data-theme="dark"] {
  --bg-primary: #1a202c;
  --bg-secondary: #2d3748;
  --bg-elevated: #2d3748;
  --text-primary: #e2e8f0;
  --text-secondary: #a0aec0;
  --text-heading: #f7fafc;
  --border-color: #4a5568;
  --link-color: #63b3ed;
  --link-hover: #90cdf4;
  --code-bg: #2d3748;
  --code-text: #fc8181;
  --pre-bg: #0f1419;
  --shadow: rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: var(--text-heading);
}

[data-theme="dark"] h2 {
  border-bottom-color: var(--border-color);
}

[data-theme="dark"] a {
  color: var(--link-color);
}

[data-theme="dark"] a:hover {
  color: var(--link-hover);
}

[data-theme="dark"] code {
  background-color: var(--code-bg);
  color: var(--code-text);
}

[data-theme="dark"] pre {
  background-color: var(--pre-bg);
  color: var(--text-primary);
}

[data-theme="dark"] blockquote {
  border-left-color: var(--link-color);
  color: var(--text-secondary);
}

[data-theme="dark"] th,
[data-theme="dark"] td {
  border-bottom-color: var(--border-color);
}

[data-theme="dark"] th {
  background-color: var(--bg-secondary);
  color: var(--text-heading);
}

[data-theme="dark"] hr {
  border-top-color: var(--border-color);
}

[data-theme="dark"] header {
  background: var(--bg-elevated);
  box-shadow: 0 2px 10px var(--shadow);
}

[data-theme="dark"] .logo {
  color: #63b3ed;
}

[data-theme="dark"] .nav-links a {
  color: var(--text-primary);
}

[data-theme="dark"] .nav-links a:hover {
  color: var(--link-color);
}

[data-theme="dark"] .hero h1 {
  color: var(--text-heading);
}

[data-theme="dark"] .hero p {
  color: var(--text-secondary);
}

[data-theme="dark"] footer {
  background-color: var(--bg-elevated);
  border-top-color: var(--border-color);
  color: var(--text-secondary);
}

/* Forms */
[data-theme="dark"] .message-form {
  background-color: var(--bg-elevated);
  border-color: var(--border-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .form-label {
  color: var(--text-heading);
}

[data-theme="dark"] .form-input,
[data-theme="dark"] .form-textarea {
  background-color: var(--bg-primary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .form-textarea:focus {
  border-color: var(--link-color);
  box-shadow: 0 0 0 3px rgba(99, 179, 237, 0.2);
}

[data-theme="dark"] .form-input::placeholder,
[data-theme="dark"] .form-textarea::placeholder {
  color: var(--text-secondary);
  opacity: 0.6;
}

/* Theme toggle button */
.theme-toggle {
  background: none;
  border: 2px solid #cbd5e0;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #333;
}

.theme-toggle:hover {
  border-color: #3182ce;
  transform: translateY(-1px);
}

[data-theme="dark"] .theme-toggle {
  border-color: #4a5568;
  color: var(--text-primary);
}

[data-theme="dark"] .theme-toggle:hover {
  border-color: #63b3ed;
}