/* ============================================
   Vector & Verse - Dark Mode Stylesheet
   Phase 1: UI Polish
   ============================================ */

/* --- Light Mode Variables --- */
:root[data-theme="light"] {
  --background-color: #ffffff;
  --text-color: #333333;
  --text-muted: #666666;
  --link-color: #4a7c59;
  --link-hover: #3d6449;
  --heading-color: #222222;
  --border-color: #eaedf0;
  --code-background: #f6f8fa;
  --code-text: #24292e;
  --nav-background: #ffffff;
  --nav-text: #333333;
  --nav-hover: #4a7c59;
  --masthead-background: #ffffff;
  --search-background: #f6f8fa;
  --search-text: #333333;
  --card-background: #ffffff;
  --card-hover-shadow: rgba(74, 124, 89, 0.08);
  --topic-background: #fafbfc;
  --tag-background: #f5f5f7;
  --tag-text: #333333;
  --tag-border: #e5e5e7;
  --tag-hover-bg: #e8f5ec;
  --blockquote-bg: #f8fafc;
  --blockquote-border: #5a9570;
  --table-header-bg: #f8f9fa;
  --table-border: #e0e0e0;
}

/* --- Dark Mode Variables --- */
:root[data-theme="dark"] {
  --background-color: #161618;
  --text-color: #c9c9c9;
  --text-muted: #888888;
  --link-color: #7fb88f;
  --link-hover: #9ccca8;
  --heading-color: #e8e8e8;
  --border-color: #2a2a2d;
  --code-background: #1e1e21;
  --code-text: #d4d4d4;
  --nav-background: #1a1a1d;
  --nav-text: #c9c9c9;
  --nav-hover: #7fb88f;
  --masthead-background: #1a1a1d;
  --search-background: #242428;
  --search-text: #c9c9c9;
  --card-background: #1e1e21;
  --card-hover-shadow: rgba(0, 0, 0, 0.3);
  --topic-background: #1a1a1d;
  --tag-background: #242428;
  --tag-text: #c9c9c9;
  --tag-border: #333337;
  --tag-hover-bg: #2a3d30;
  --blockquote-bg: #1e1e21;
  --blockquote-border: #5a9570;
  --table-header-bg: #1e1e21;
  --table-border: #333337;
}

/* --- Base Styles --- */
body {
  background-color: var(--background-color);
  color: var(--text-color);
  transition: background-color 0.2s ease, color 0.2s ease;
}

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

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

h1, h2, h3, h4, h5, h6 {
  color: var(--heading-color);
}

/* --- Code Blocks --- */
pre, code {
  background-color: var(--code-background);
  color: var(--code-text);
}

:root[data-theme="dark"] pre {
  border: 1px solid var(--border-color);
}

:root[data-theme="dark"] code {
  background-color: rgba(255, 255, 255, 0.06);
}

:root[data-theme="dark"] pre code {
  background-color: transparent;
}

/* --- Navigation --- */
.masthead {
  background-color: var(--masthead-background);
}


.masthead__inner-wrap {
  background-color: var(--nav-background);
}

.greedy-nav {
  background-color: var(--nav-background);
}

.greedy-nav a,
.greedy-nav .visible-links a {
  color: var(--nav-text);
}

.greedy-nav a:hover,
.greedy-nav .visible-links a:hover {
  color: var(--nav-hover);
}

.site-title {
  color: var(--nav-text);
}

/* --- Search --- */
.search__toggle {
  color: var(--nav-text);
}

.search__toggle:hover {
  color: var(--nav-hover);
}

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

.search-content .search-input {
  color: var(--search-text);
  background-color: var(--search-background);
}

/* --- Dark Mode Toggle --- */
.dark-mode-toggle {
  color: var(--nav-text);
  transition: color 0.2s ease;
}

.dark-mode-toggle:hover {
  color: var(--nav-hover);
}

.greedy-nav .dark-mode-toggle {
  margin-right: 5px;
}

/* --- Featured Topics Section --- */
:root[data-theme="dark"] .topic-section {
  background: var(--topic-background);
  border: 1px solid var(--border-color);
}

:root[data-theme="dark"] .topic-title {
  color: var(--heading-color);
}

:root[data-theme="dark"] .topic-accent {
  background: var(--link-color);
}

/* --- Post Cards --- */
:root[data-theme="dark"] .post-card-modern {
  background: var(--card-background);
  border: 1px solid var(--border-color);
}

:root[data-theme="dark"] .post-card-modern:hover {
  border-color: #3a4a60;
  box-shadow: 0 4px 16px var(--card-hover-shadow);
}

:root[data-theme="dark"] .post-title-modern {
  color: var(--link-color);
}

:root[data-theme="dark"] .post-title-modern:hover {
  color: var(--link-hover);
}

:root[data-theme="dark"] .post-meta-modern {
  color: var(--text-muted);
}

:root[data-theme="dark"] .post-excerpt-modern {
  color: var(--text-color);
}

:root[data-theme="dark"] .read-more-arrow {
  color: var(--link-color);
}

:root[data-theme="dark"] .post-card-modern:hover .read-more-arrow {
  color: var(--link-hover);
}

/* --- Tag Pills --- */
:root[data-theme="dark"] .tag-bar-label {
  color: var(--text-muted);
}

:root[data-theme="dark"] .tag-pill {
  background: var(--tag-background);
  color: var(--tag-text);
  border: 1px solid var(--tag-border);
}

:root[data-theme="dark"] .tag-pill:hover {
  background: var(--tag-hover-bg);
  border-color: var(--link-color);
  color: var(--link-color);
}

:root[data-theme="dark"] .tag-pill-count {
  color: var(--text-muted);
}

:root[data-theme="dark"] .tag-pill-more {
  background: var(--tag-background);
  color: var(--text-muted);
  border: 1px solid var(--tag-border);
}

:root[data-theme="dark"] .tag-pill-filter.active {
  background: var(--tag-hover-bg);
  border-color: var(--link-color);
  color: var(--link-color);
}

:root[data-theme="dark"] .tag-pill-filter.active .tag-pill-count {
  color: var(--link-color);
}

/* --- Tag Page --- */
:root[data-theme="dark"] .tag-title {
  color: var(--heading-color);
}

:root[data-theme="dark"] .tag-description {
  color: var(--text-muted);
}

:root[data-theme="dark"] .tag-post-card {
  background: var(--card-background);
  border: 1px solid var(--border-color);
}

:root[data-theme="dark"] .tag-post-card:hover {
  border-color: #3a4a60;
  box-shadow: 0 4px 16px var(--card-hover-shadow);
}

:root[data-theme="dark"] .tag-post-card .post-title-modern {
  color: var(--link-color);
}

:root[data-theme="dark"] .tag-post-card .post-title-modern:hover {
  color: var(--link-hover);
}

:root[data-theme="dark"] .tag-post-card .post-meta-modern {
  color: var(--text-muted);
}

:root[data-theme="dark"] .tag-post-card .post-excerpt-modern {
  color: var(--text-color);
}

/* --- Posts Page --- */
:root[data-theme="dark"] .posts-title {
  color: var(--heading-color);
}

:root[data-theme="dark"] .posts-description {
  color: var(--text-muted);
}

:root[data-theme="dark"] .post-tag-link {
  color: var(--link-color);
}

:root[data-theme="dark"] .post-tag-link:hover {
  color: var(--link-hover);
}

:root[data-theme="dark"] .post-tags-modern {
  color: var(--text-muted);
}

/* --- Page Taxonomy --- */
:root[data-theme="dark"] .page__taxonomy {
  border-top-color: var(--border-color);
}

:root[data-theme="dark"] .page__taxonomy-item {
  background: var(--tag-background);
  color: var(--tag-text);
}

:root[data-theme="dark"] .page__taxonomy-item:hover {
  background: var(--tag-hover-bg);
  color: var(--link-color);
}

/* --- Social Share Bar --- */
:root[data-theme="dark"] .social-share-bar {
  border-color: var(--border-color);
}

/* --- Content Styles --- */

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

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

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

/* --- Images --- */
:root[data-theme="dark"] .page__content img,
:root[data-theme="dark"] .post__content img {
  opacity: 0.92;
}

:root[data-theme="dark"] .page__content img:hover,
:root[data-theme="dark"] .post__content img:hover {
  opacity: 1;
}

/* --- Author Profile Sidebar --- */
:root[data-theme="dark"] .author__name {
  color: var(--heading-color);
}

:root[data-theme="dark"] .author__bio {
  color: var(--text-color);
}

:root[data-theme="dark"] .author__urls a {
  color: var(--text-color);
}

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

/* --- Minimal Mistakes Theme Overrides --- */
:root[data-theme="dark"] .page__title {
  color: var(--heading-color);
}

:root[data-theme="dark"] .page__meta {
  color: var(--text-muted);
}

:root[data-theme="dark"] .toc {
  background: var(--card-background);
  border: 1px solid var(--border-color);
}

:root[data-theme="dark"] .toc__menu a {
  color: var(--text-color);
}

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

:root[data-theme="dark"] .nav__sub-title {
  color: var(--heading-color);
}

/* --- Selection --- */
:root[data-theme="dark"] ::selection {
  background: rgba(107, 163, 247, 0.3);
  color: var(--heading-color);
}

/* --- Scrollbar (Webkit) --- */
:root[data-theme="dark"] ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

:root[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--background-color);
}

:root[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #3a3a3e;
  border-radius: 5px;
}

:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #4a4a4e;
}

/* --- Sidenotes --- */
:root[data-theme="dark"] .sidenote {
  color: var(--text-muted);
}

:root[data-theme="dark"] .sidenote::before {
  color: var(--link-color);
}

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

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

@media (max-width: 1100px) {
  :root[data-theme="dark"] .sidenote {
    background: var(--card-background);
    border-left-color: var(--link-color);
  }

  :root[data-theme="dark"] .sidenote-ref {
    background: var(--tag-background);
  }

  :root[data-theme="dark"] .sidenote-ref:hover,
  :root[data-theme="dark"] .sidenote-ref.active {
    background: var(--tag-hover-bg);
  }
}

/* --- Left TOC Navigation --- */
:root[data-theme="dark"] .toc-left-content {
  background: var(--background-color);
  border-right-color: var(--border-color);
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.3);
}

:root[data-theme="dark"] .toc-left-title {
  border-bottom-color: var(--border-color);
}

:root[data-theme="dark"] .toc-title-text {
  color: var(--heading-color);
}

:root[data-theme="dark"] .toc-reading-time {
  color: var(--text-muted);
}

:root[data-theme="dark"] .toc-left-item::before {
  background: var(--border-color);
}

:root[data-theme="dark"] .toc-left-item.active::before {
  background: var(--link-color);
}

:root[data-theme="dark"] .toc-left-link {
  color: #6dbac7;
}

:root[data-theme="dark"] .toc-left-link:hover {
  color: #8ed0db;
}

:root[data-theme="dark"] .toc-left-item.active .toc-left-link {
  color: var(--heading-color);
}