/**
 * Nebula Theme - Dark Mode Styles
 * Version: 2.0.0
 * Complete dark mode color scheme overrides
 */

/* ============================
   Dark Mode Color System
   ============================ */

/* Dark mode activated via data-theme attribute or body class */
[data-theme="dark"],
body.dark-mode {
    /* Primary colors - adjust for dark mode visibility */
    --nebula-primary: #38BDF8;
    --nebula-primary-light: #0C4A6E;
    --nebula-primary-lighter: #0C4A6E;
    --nebula-primary-dark: #7DD3FC;
    --nebula-primary-darker: #BAE6FD;
    --nebula-primary-hover: #38BDF8;

    /* Secondary - already dark, invert for light elements */
    --nebula-secondary: #E2E8F0;
    --nebula-secondary-light: #CBD5E1;
    --nebula-secondary-lighter: #94A3B8;
    --nebula-secondary-dark: #F1F5F9;
    --nebula-secondary-hover: #CBD5E1;

    /* Accent - maintain visibility in dark mode */
    --nebula-accent: #FBBF24;
    --nebula-accent-light: #451A03;
    --nebula-accent-lighter: #78350F;
    --nebula-accent-dark: #FDE047;
    --nebula-accent-hover: #FCD34D;

    /* Background layers */
    --nebula-bg: #0F172A;
    --nebula-bg-secondary: #1E293B;
    --nebula-bg-tertiary: #334155;
    --nebula-bg-dark: #020617;

    /* Text - light text on dark backgrounds */
    --nebula-text: #F1F5F9;
    --nebula-text-secondary: #94A3B8;
    --nebula-text-muted: #64748B;
    --nebula-text-inverse: #0F172A;

    /* Border colors */
    --nebula-border: #334155;
    --nebula-border-light: #475567;
    --nebula-border-dark: #1E293B;

    /* Status colors - adjust for dark mode */
    --nebula-success: #34D399;
    --nebula-success-light: #064E3B;
    --nebula-success-dark: #10B981;

    --nebula-warning: #FBBF24;
    --nebula-warning-light: #451A03;
    --nebula-warning-dark: #D97706;

    --nebula-error: #F87171;
    --nebula-error-light: #450A0A;
    --nebula-error-dark: #EF4444;

    --nebula-info: #38BDF8;
    --nebula-info-light: #0C4A6E;
    --nebula-info-dark: #0EA5E9;

    /* Shadows - darker for dark mode */
    --nebula-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --nebula-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --nebula-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
    --nebula-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6);
    --nebula-shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.7);
    --nebula-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.4);
    --nebula-shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.5);

    /* Header specific dark mode */
    --ds-header-bg: #0F172A;
    --ds-header-border: #334155;
}

/* ============================
   Dark Mode Backgrounds
   ============================ */

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

/* Card backgrounds in dark mode */
[data-theme="dark"] .ds-card,
[data-theme="dark"] .ds-value-card,
[data-theme="dark"] .ds-team-card,
[data-theme="dark"] .ds-faq-item,
[data-theme="dark"] .ds-contact-card,
[data-theme="dark"] .widget-popular-posts,
[data-theme="dark"] .popular-post-item,
body.dark-mode .ds-card,
body.dark-mode .ds-value-card,
body.dark-mode .ds-team-card,
body.dark-mode .ds-faq-item,
body.dark-mode .ds-contact-card,
body.dark-mode .widget-popular-posts,
body.dark-mode .popular-post-item {
    background-color: var(--nebula-bg-secondary);
    border-color: var(--nebula-border);
}

/* Section backgrounds */
[data-theme="dark"] .ds-about-section,
[data-theme="dark"] .ds-contact-section,
[data-theme="dark"] .ds-faq-section,
[data-theme="dark"] .ds-popular-articles,
body.dark-mode .ds-about-section,
body.dark-mode .ds-contact-section,
body.dark-mode .ds-faq-section,
body.dark-mode .ds-popular-articles {
    background-color: var(--nebula-bg);
}

/* Hero sections - already dark, but adjust for consistency */
[data-theme="dark"] .ds-contact-hero,
[data-theme="dark"] .ds-about-hero,
body.dark-mode .ds-contact-hero,
body.dark-mode .ds-about-hero {
    background: linear-gradient(135deg, var(--nebula-bg-dark) 0%, var(--nebula-bg-secondary) 50%, var(--nebula-bg-dark) 100%);
}

/* Footer dark mode */
[data-theme="dark"] .ds-footer,
body.dark-mode .ds-footer {
    background-color: var(--nebula-bg-dark);
    border-top-color: var(--nebula-border);
}

/* ============================
   Dark Mode Text
   ============================ */

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] .ds-about-hero__title,
[data-theme="dark"] .ds-contact-hero__title,
[data-theme="dark"] .ds-contact-form__title,
[data-theme="dark"] .ds-contact-info__title,
[data-theme="dark"] .ds-faq-section__title,
[data-theme="dark"] .ds-faq-item__question,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode .ds-about-hero__title,
body.dark-mode .ds-contact-hero__title,
body.dark-mode .ds-contact-form__title,
body.dark-mode .ds-contact-info__title,
body.dark-mode .ds-faq-section__title,
body.dark-mode .ds-faq-item__question {
    color: var(--nebula-text);
}

[data-theme="dark"] p,
[data-theme="dark"] .ds-about-intro,
[data-theme="dark"] .ds-value-card__desc,
[data-theme="dark"] .ds-team-card__desc,
[data-theme="dark"] .ds-faq-item__answer,
[data-theme="dark"] .ds-info-item__value,
body.dark-mode p,
body.dark-mode .ds-about-intro,
body.dark-mode .ds-value-card__desc,
body.dark-mode .ds-team-card__desc,
body.dark-mode .ds-faq-item__answer,
body.dark-mode .ds-info-item__value {
    color: var(--nebula-text-secondary);
}

[data-theme="dark"] .ds-info-item__label,
[data-theme="dark"] .ds-response-time__desc,
body.dark-mode .ds-info-item__label,
body.dark-mode .ds-response-time__desc {
    color: var(--nebula-text-muted);
}

/* Link colors */
[data-theme="dark"] a:not(.ds-btn):not(.ds-cta-btn),
body.dark-mode a:not(.ds-btn):not(.ds-cta-btn) {
    color: var(--nebula-primary);
}

[data-theme="dark"] a:not(.ds-btn):not(.ds-cta-btn):hover,
body.dark-mode a:not(.ds-btn):not(.ds-cta-btn):hover {
    color: var(--nebula-primary-hover);
}

/* ============================
   Dark Mode Form Elements
   ============================ */

[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] textarea,
[data-theme="dark"] select,
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode input[type="search"],
body.dark-mode textarea,
body.dark-mode select {
    background-color: var(--nebula-bg-secondary);
    border-color: var(--nebula-border);
    color: var(--nebula-text);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus,
body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
    border-color: var(--nebula-primary);
    background-color: var(--nebula-bg-tertiary);
}

/* Placeholder text */
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder,
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: var(--nebula-text-muted);
}

/* ============================
   Dark Mode Components
   ============================ */

/* Article list */
[data-theme="dark"] .ds-article-card,
[data-theme="dark"] .ds-article-card--featured,
body.dark-mode .ds-article-card,
body.dark-mode .ds-article-card--featured {
    background-color: var(--nebula-bg-secondary);
    border-color: var(--nebula-border);
}

[data-theme="dark"] .ds-article-card__title a,
[data-theme="dark"] .ds-article-card--featured__title a,
body.dark-mode .ds-article-card__title a,
body.dark-mode .ds-article-card--featured__title a {
    color: var(--nebula-text);
}

[data-theme="dark"] .ds-article-card__title a:hover,
[data-theme="dark"] .ds-article-card--featured__title a:hover,
body.dark-mode .ds-article-card__title a:hover,
body.dark-mode .ds-article-card--featured__title a:hover {
    color: var(--nebula-primary);
}

[data-theme="dark"] .ds-article-card__excerpt,
[data-theme="dark"] .ds-article-card--featured__excerpt,
body.dark-mode .ds-article-card__excerpt,
body.dark-mode .ds-article-card--featured__excerpt {
    color: var(--nebula-text-secondary);
}

/* Tags */
[data-theme="dark"] .ds-tag,
body.dark-mode .ds-tag {
    background-color: var(--nebula-bg-tertiary);
    color: var(--nebula-text-secondary);
    border-color: var(--nebula-border);
}

[data-theme="dark"] .ds-tag:hover,
body.dark-mode .ds-tag:hover {
    background-color: var(--nebula-primary);
    color: var(--nebula-text-inverse);
}

/* ============================
   Dark Mode Scrollbar
   ============================ */

[data-theme="dark"] ::-webkit-scrollbar,
body.dark-mode ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

[data-theme="dark"] ::-webkit-scrollbar-track,
body.dark-mode ::-webkit-scrollbar-track {
    background: var(--nebula-bg-secondary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb,
body.dark-mode ::-webkit-scrollbar-thumb {
    background: var(--nebula-border);
    border-radius: 5px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover,
body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: var(--nebula-text-muted);
}

/* Firefox scrollbar */
[data-theme="dark"] * {
    scrollbar-width: thin;
    scrollbar-color: var(--nebula-border) var(--nebula-bg-secondary);
}

/* ============================
   Dark Mode Selection
   ============================ */

[data-theme="dark"] ::selection,
body.dark-mode ::selection {
    background-color: var(--nebula-primary);
    color: var(--nebula-text-inverse);
}

[data-theme="dark"] ::-moz-selection,
body.dark-mode ::-moz-selection {
    background-color: var(--nebula-primary);
    color: var(--nebula-text-inverse);
}

/* ============================
   Dark Mode Focus States
   ============================ */

[data-theme="dark"] *:focus-visible,
body.dark-mode *:focus-visible {
    outline-color: var(--nebula-primary);
}

/* ============================
   Dark Mode Transitions
   ============================ */

[data-theme="dark"],
[data-theme="dark"] *,
body.dark-mode,
body.dark-mode * {
    transition: background-color var(--nebula-duration-normal) var(--nebula-ease-out),
                border-color var(--nebula-duration-normal) var(--nebula-ease-out),
                color var(--nebula-duration-normal) var(--nebula-ease-out),
                box-shadow var(--nebula-duration-normal) var(--nebula-ease-out);
}

/* Disable transitions on page load to prevent flash */
.js-dark-mode-init {
    transition: none !important;
}