/**
 * NoSpace Dark Theme
 * Dark mode color overrides
 */

/* ========================================
   CSS Variables for Dark Mode
   ======================================== */
:root[data-theme="dark"] {
    /* Primary colors */
    --bg-primary: #1a1a2e;
    --bg-secondary: #16213e;
    --bg-tertiary: #0f1419;
    
    /* Text colors */
    --text-primary: #e4e4e7;
    --text-secondary: #a1a1aa;
    --text-muted: #71717a;
    
    /* Accent colors */
    --accent-primary: #8b7bea;
    --accent-secondary: #9b6bc2;
    
    /* Border colors */
    --border-color: rgba(255, 255, 255, 0.1);
    --border-hover: rgba(255, 255, 255, 0.2);
    
    /* Card colors */
    --card-bg: #1e1e2e;
    --card-hover: #252537;
}

/* ========================================
   Global Dark Mode Styles
   ======================================== */
html[data-theme="dark"] {
    background: var(--bg-primary);
    color: var(--text-primary);
}

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

/* All sections inherit dark background by default */
html[data-theme="dark"] section,
html[data-theme="dark"] .about-section,
html[data-theme="dark"] .timeline-section,
html[data-theme="dark"] .cta-final-section {
    background: var(--bg-primary);
    color: var(--text-primary);
}

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

html[data-theme="dark"] p,
html[data-theme="dark"] li {
    color: var(--text-secondary);
}

/* ========================================
   Header Dark Mode
   ======================================== */
html[data-theme="dark"] .container-header {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d1b4e 100%);
}

html[data-theme="dark"] .container-topbar {
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid var(--border-color);
}

html[data-theme="dark"] .site-description {
    color: var(--text-secondary);
}

/* ========================================
   Blog Dark Mode
   ======================================== */
html[data-theme="dark"] .blog-featured,
html[data-theme="dark"] .blog-grid {
    background: transparent;
}

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

html[data-theme="dark"] .blog-card:hover {
    background: var(--card-hover);
    border-color: var(--border-hover);
}

html[data-theme="dark"] .blog-card h2 a,
html[data-theme="dark"] .blog-card h3 a {
    color: var(--text-primary);
}

html[data-theme="dark"] .blog-card h2 a:hover,
html[data-theme="dark"] .blog-card h3 a:hover {
    color: var(--accent-primary);
}

html[data-theme="dark"] .card-meta,
html[data-theme="dark"] .article-meta {
    color: var(--text-muted);
}

html[data-theme="dark"] .card-excerpt,
html[data-theme="dark"] .article-body {
    color: var(--text-secondary);
}

/* ========================================
   Article Dark Mode
   ======================================== */
html[data-theme="dark"] .article-container {
    background: var(--bg-primary);
}

html[data-theme="dark"] .article-header h1 {
    color: var(--text-primary);
}

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

html[data-theme="dark"] .article-body h2,
html[data-theme="dark"] .article-body h3,
html[data-theme="dark"] .article-body h4 {
    color: var(--text-primary);
}

html[data-theme="dark"] .article-body a {
    color: var(--accent-primary);
}

html[data-theme="dark"] .article-body a:hover {
    color: var(--accent-secondary);
}

html[data-theme="dark"] .article-body blockquote {
    background: var(--card-bg);
    border-left-color: var(--accent-primary);
    color: var(--text-secondary);
}

html[data-theme="dark"] .article-body pre,
html[data-theme="dark"] .article-body code {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

/* ========================================
   Search Dark Mode
   ======================================== */
html[data-theme="dark"] .search-container {
    background: var(--bg-primary);
}

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

html[data-theme="dark"] .search-form input:focus {
    border-color: var(--accent-primary);
    background: var(--card-hover);
}

html[data-theme="dark"] .search-form input::placeholder {
    color: var(--text-muted);
}

html[data-theme="dark"] .search-result-item {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
}

html[data-theme="dark"] .search-result-item:hover {
    background: var(--card-hover);
    border-color: var(--border-hover);
}

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

html[data-theme="dark"] .result-title a:hover {
    color: var(--accent-primary);
}

html[data-theme="dark"] .result-description {
    color: var(--text-secondary);
}

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

/* ========================================
   Landing Page Dark Mode
   ======================================== */
html[data-theme="dark"] .hero-section {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d1b4e 100%);
}

html[data-theme="dark"] .soft-glass-card,
html[data-theme="dark"] .highlight-card {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-color);
}

html[data-theme="dark"] .highlight-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--accent-primary);
}

html[data-theme="dark"] .cta-button {
    background: var(--accent-primary);
    color: white;
}

html[data-theme="dark"] .cta-button:hover {
    background: var(--accent-secondary);
}

html[data-theme="dark"] .cta-button.secondary {
    background: transparent;
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

html[data-theme="dark"] .about-card h3 {
    color: var(--text-primary);
}

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

html[data-theme="dark"] .cta-final {
    background: linear-gradient(135deg, rgba(30, 58, 95, 0.95) 0%, rgba(45, 27, 78, 0.95) 100%);
}

html[data-theme="dark"] .cta-final h2 {
    color: var(--text-primary);
}

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

html[data-theme="dark"] .cta-button {
    background: var(--accent-primary);
    color: white;
}

html[data-theme="dark"] .cta-button:hover {
    background: var(--accent-secondary);
}

html[data-theme="dark"] .timeline-section {
    background: var(--bg-primary);
}

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

html[data-theme="dark"] .timeline-dot {
    border-color: var(--accent-primary);
    background: var(--bg-primary);
}

html[data-theme="dark"] .timeline-content {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
}

html[data-theme="dark"] .timeline-content:hover {
    border-color: var(--accent-primary);
}

html[data-theme="dark"] .rag-section {
    background: linear-gradient(135deg, rgba(30, 58, 95, 0.9) 0%, rgba(45, 27, 78, 0.9) 100%);
}

/* ========================================
   Forms Dark Mode
   ======================================== */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
    background: var(--card-hover);
    border-color: var(--accent-primary);
}

/* ========================================
   Breadcrumbs Dark Mode
   ======================================== */
html[data-theme="dark"] .breadcrumbs {
    background: var(--bg-secondary);
}

html[data-theme="dark"] .breadcrumbs a {
    color: var(--text-secondary);
}

html[data-theme="dark"] .breadcrumbs a:hover {
    color: var(--accent-primary);
}

/* ========================================
   Pagination Dark Mode
   ======================================== */
html[data-theme="dark"] .pagination a,
html[data-theme="dark"] .pagination span {
    background: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

html[data-theme="dark"] .pagination a:hover {
    background: var(--card-hover);
    border-color: var(--accent-primary);
}

html[data-theme="dark"] .pagination .active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}

/* ========================================
   Smooth Transitions
   ======================================== */
html,
body,
.blog-card,
.article-container,
.search-result-item,
.about-card,
.timeline-content,
input,
textarea,
select {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}