/**
 * SmartMag Dark Mode CSS
 * Dark color scheme with CSS custom property overrides
 */

/* ============================================================================
   DARK MODE COLOR SCHEME
   ========================================================================= */

.scheme-dark,
body.scheme-dark {
  /* Inverted Contrast Colors */
  --c-contrast-0: #000;
  --c-contrast-50: #0a0a0a;
  --c-contrast-100: #1a1a1a;
  --c-contrast-200: #2a2a2a;
  --c-contrast-400: #555;
  --c-contrast-500: #777;
  --c-contrast-650: #a0a0a0;
  --c-contrast-700: #bbb;
  --c-contrast-800: #ddd;
  --c-contrast-900: #f0f0f0;
  --c-contrast: #fff;

  /* Adjusted Element Colors */
  --c-separator: rgba(255, 255, 255, 0.1);
  --c-links: var(--c-contrast-900);
  --c-headings: var(--c-contrast);
  --c-excerpts: var(--c-contrast-650);
  --c-post-meta: var(--c-contrast-500);

  /* Main color stays the same */
  --c-main: #2ab391;

  /* Background */
  background-color: #0a0a0a;
  color: #ddd;
}

/* Logo - add white background for visibility on dark header */
.scheme-dark .logo-main img,
.scheme-dark .ts-logo img {
  background: #fff;
  border-radius: 6px;
  padding: 4px 8px;
}

/* Specific Element Overrides */
.scheme-dark .smart-head {
  background: #0a0a0a;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.scheme-dark .sticky-header {
  background: #0a0a0a;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.scheme-dark .post,
.scheme-dark .post-content,
.scheme-dark article.post-content,
.scheme-dark .post-card,
.scheme-dark .widget {
  background: #1a1a1a !important;
  border-color: rgba(255, 255, 255, 0.1);
}

.scheme-dark .main-footer {
  background: #0a0a0a;
  border-top-color: rgba(255, 255, 255, 0.1);
}

.scheme-dark input[type="text"],
.scheme-dark input[type="email"],
.scheme-dark input[type="search"],
.scheme-dark textarea {
  background: #1a1a1a;
  border-color: rgba(255, 255, 255, 0.2);
  color: #ddd;
}

.scheme-dark input:focus,
.scheme-dark textarea:focus {
  border-color: var(--c-main);
}

.scheme-dark code,
.scheme-dark pre {
  background: #1a1a1a;
  color: #f0f0f0;
}

.scheme-dark blockquote {
  background: #1a1a1a;
  border-left-color: var(--c-main);
  color: var(--c-contrast-650);
}

.scheme-dark .author-box {
  background: #1a1a1a;
}

.scheme-dark .btn-secondary {
  background: #2a2a2a;
  color: #ddd;
}

.scheme-dark .btn-secondary:hover {
  background: #3a3a3a;
}

/* Dark Mode Toggle Icons */
.scheme-dark .light-icon {
  display: inline-block;
}

.scheme-dark .dark-icon {
  display: none;
}

.light-icon {
  display: none;
}

.dark-icon {
  display: inline-block;
}

.scheme-dark .light-icon {
  display: inline-block;
}

.scheme-dark .dark-icon {
  display: none;
}

/* Search Modal Dark */
.scheme-dark .search-modal-overlay {
  background: rgba(0, 0, 0, 0.95);
}

.scheme-dark .search-modal-content {
  background: #1a1a1a;
  border-color: rgba(255, 255, 255, 0.1);
}

/* Mobile Nav Dark */
.scheme-dark .mobile-nav-wrap {
  background: #0a0a0a;
}

/* Smooth Color Transition */
body,
.smart-head,
.post,
.post-card,
.widget,
.main-footer,
input,
textarea {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ============================================================================
   FORCE DARK MODE - OVERRIDE ALL OTHER STYLES
   ========================================================================= */

/* Force dark backgrounds with maximum specificity */
body.scheme-dark .post,
body.scheme-dark article.post,
.scheme-dark .post.post-classic,
.scheme-dark article.post.post-classic,
.scheme-dark .post[class*="post-"],
body.scheme-dark .content-wrap .post,
body.scheme-dark main .post,
.scheme-dark .site-main .post {
  background: #1a1a1a !important;
  background-color: #1a1a1a !important;
}

/* Force dark body background */
body.scheme-dark,
html body.scheme-dark {
  background: #0a0a0a !important;
  background-color: #0a0a0a !important;
}

/* ============================================================================
   CATEGORY / TAG / SUBTAG PAGES - DARK MODE
   Override inline styles with hardcoded light-mode colors
   ========================================================================= */

/* Category/tag page header title */
body.scheme-dark .category-header h1,
body.scheme-dark .archive-title,
body.scheme-dark .tag-header h1 {
  color: #fff !important;
}

/* Category/tag description and count */
body.scheme-dark .category-header p,
body.scheme-dark .category-description,
body.scheme-dark .category-count {
  color: #999 !important;
}

/* Article cards */
body.scheme-dark .article-card {
  background: #1a1a1a !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.scheme-dark .article-card .article-title,
body.scheme-dark .article-card .article-title a,
body.scheme-dark .article-card h3,
body.scheme-dark .article-card h3 a {
  color: #fff !important;
}

body.scheme-dark .article-card .article-excerpt {
  color: #999 !important;
}

body.scheme-dark .article-card .article-meta,
body.scheme-dark .article-card .article-date {
  color: #888 !important;
}

/* Load more button */
body.scheme-dark .load-more-btn {
  background: #2a2a2a !important;
  color: #ddd !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* No articles message */
body.scheme-dark .category-page > div[style*="color"] {
  color: #999 !important;
}