/* Dark Mode: CSS Custom Properties & Toggle */

/* ── Light mode defaults ── */
:root {
  --color-bg-page: #f8f8f8;
  --color-bg-surface: #fff;
  --color-bg-surface-alt: #f8f8f8;
  --color-bg-surface-hover: #fff;
  --color-text-primary: #222;
  --color-text-secondary: #333;
  --color-text-tertiary: #555;
  --color-text-muted: #666;
  --color-border: #ddd;
  --color-border-light: #eee;
  --color-link: #cc0000;
  --color-link-hover: #a30000;
  --color-gradient-start: #f8f8f8;
  --color-gradient-end: #efefef;
  --color-btn-gradient-start: #ffffff;
  --color-btn-gradient-end: #f0f0f0;
  --color-text-shadow-light: #fff;
  --color-glossy-overlay: rgba(255,255,255,0.8);
  --color-inline-code-bg: #f0f0f0;
  --color-inline-code-text: #cc0000;
  --color-blockquote-text: #444;
  --color-img-border: #ddd;
  --color-tag-bg: #eee;
  --color-tag-text: #666;
}

/* ── Dark mode overrides (JS-toggled) ── */
[data-theme="dark"] {
  --color-bg-page: #1a1a1a;
  --color-bg-surface: #242424;
  --color-bg-surface-alt: #2a2a2a;
  --color-bg-surface-hover: #2e2e2e;
  --color-text-primary: #e0e0e0;
  --color-text-secondary: #d0d0d0;
  --color-text-tertiary: #aaa;
  --color-text-muted: #999;
  --color-border: #3a3a3a;
  --color-border-light: #333;
  --color-link: #ff6666;
  --color-link-hover: #ff4444;
  --color-gradient-start: #2e2e2e;
  --color-gradient-end: #242424;
  --color-btn-gradient-start: #3a3a3a;
  --color-btn-gradient-end: #2a2a2a;
  --color-text-shadow-light: transparent;
  --color-glossy-overlay: rgba(255,255,255,0.05);
  --color-inline-code-bg: #2a2a2a;
  --color-inline-code-text: #ff8080;
  --color-blockquote-text: #ccc;
  --color-img-border: #444;
  --color-tag-bg: #3a3a3a;
  --color-tag-text: #bbb;
}

/* ── No-JS fallback: respect OS preference ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg-page: #1a1a1a;
    --color-bg-surface: #242424;
    --color-bg-surface-alt: #2a2a2a;
    --color-bg-surface-hover: #2e2e2e;
    --color-text-primary: #e0e0e0;
    --color-text-secondary: #d0d0d0;
    --color-text-tertiary: #aaa;
    --color-text-muted: #999;
    --color-border: #3a3a3a;
    --color-border-light: #333;
    --color-link: #ff6666;
    --color-link-hover: #ff4444;
    --color-gradient-start: #2e2e2e;
    --color-gradient-end: #242424;
    --color-btn-gradient-start: #3a3a3a;
    --color-btn-gradient-end: #2a2a2a;
    --color-text-shadow-light: transparent;
    --color-glossy-overlay: rgba(255,255,255,0.05);
    --color-inline-code-bg: #2a2a2a;
    --color-inline-code-text: #ff8080;
    --color-blockquote-text: #ccc;
    --color-img-border: #444;
    --color-tag-bg: #3a3a3a;
    --color-tag-text: #bbb;
  }
}

/* ── Theme Toggle Button ── */
.theme-toggle {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  padding: 6px 14px;
  cursor: pointer;
  color: white;
  font-size: 18px;
  line-height: 1;
  transition: background 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.3);
}

.theme-toggle .toggle-label {
  font-size: 12px;
  font-family: Verdana, Arial, sans-serif;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
  .theme-toggle .toggle-label {
    display: none;
  }
}