/*
 * Dark Mode Styles
 *
 * 2026 Best Practices:
 * - Never use pure black (#000000)
 * - Use lighter surfaces for elevated elements
 * - Less saturated accent colors
 * - Minimum 4.5:1 contrast ratio
 *
 * This file overrides CSS variables AND provides component fixes
 * for elements that don't use variables.
 */

/* =============================================
   DARK MODE VARIABLES
   ============================================= */

/* System preference detection */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Core colors */
        --primary-color: #e2e8f0;
        --accent-color: #38bdf8;
        --background-color: #0f0f0f;
        --text-color: #e2e8f0;
        --hover-color: #7dd3fc;

        /* Surface colors */
        --color-surface: #1a1a1a;
        --color-surface-elevated: #262626;
        --color-surface-alt: #1f1f1f;

        /* Text colors */
        --color-text-muted: #94a3b8;
        --color-text-subtle: #64748b;
        --color-text-inverse: #0f172a;

        /* Border colors */
        --color-border: #334155;
        --color-border-light: #262626;

        /* Shadow adjustments for dark mode */
        --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
        --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    }
}

/* Manual dark mode toggle */
:root[data-theme="dark"] {
    /* Core colors */
    --primary-color: #e2e8f0;
    --accent-color: #38bdf8;
    --background-color: #0f0f0f;
    --text-color: #e2e8f0;
    --hover-color: #7dd3fc;

    /* Surface colors */
    --color-surface: #1a1a1a;
    --color-surface-elevated: #262626;
    --color-surface-alt: #1f1f1f;

    /* Text colors */
    --color-text-muted: #94a3b8;
    --color-text-subtle: #64748b;
    --color-text-inverse: #0f172a;

    /* Border colors */
    --color-border: #334155;
    --color-border-light: #262626;

    /* Shadow adjustments for dark mode */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* =============================================
   THEME TOGGLE BUTTON
   ============================================= */

#theme-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: var(--space-2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    transition: background 0.2s ease;
}

#theme-toggle:hover {
    background: var(--color-border);
}

#theme-toggle svg {
    width: 20px;
    height: 20px;
}

/* Show/hide icons based on theme */
#theme-toggle .icon-sun { display: none; }
#theme-toggle .icon-moon { display: block; }

:root[data-theme="dark"] #theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] #theme-toggle .icon-moon { display: none; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) #theme-toggle .icon-sun { display: block; }
    :root:not([data-theme="light"]) #theme-toggle .icon-moon { display: none; }
}

/* =============================================
   DARK MODE COMPONENT OVERRIDES (DRY)
   Single selector block for manual toggle,
   duplicated in @media for system preference
   ============================================= */

:root[data-theme="dark"] {
    /* Header/Banner */
    & header,
    & .site-header,
    & [role="banner"] {
        background-color: var(--background-color);
    }

    /* Main content wrapper (Gambit parent theme) */
    & .site-content,
    & .site-content-wrap,
    & .content-area {
        background-color: var(--background-color);
    }

    /* Site tagline */
    & .site-description {
        color: var(--color-text-muted);
    }

    /* All cards and elevated surfaces */
    & .product-card,
    & .tech-category,
    & .timeline-content,
    & .credential-item,
    & .connect-link,
    & .category-pill {
        background-color: var(--color-surface-elevated);
        color: var(--text-color);
    }

    /* CTA buttons - white text on accent */
    & .product-cta {
        color: #ffffff;
        background-color: var(--accent-color);
    }

    /* Category pills hover */
    & .category-pill:hover {
        background-color: var(--accent-color);
        color: #ffffff;
    }

    /* Connect links hover */
    & .connect-link:hover {
        background-color: var(--accent-color);
        color: #ffffff;
    }

    /* Form inputs */
    & input[type="text"],
    & input[type="email"],
    & input[type="url"],
    & input[type="search"],
    & textarea,
    & select {
        background-color: var(--color-surface);
        color: var(--text-color);
        border-color: var(--color-border);
    }

    & input::placeholder,
    & textarea::placeholder {
        color: var(--color-text-subtle);
    }

    /* Comments section */
    & .comment,
    & .comment-body,
    & .comment-content {
        background-color: transparent;
        color: var(--text-color);
    }

    & .comment-author,
    & .comment-metadata {
        color: var(--color-text-muted);
    }

    & .comment-metadata a {
        color: var(--color-text-subtle);
    }

    /* Floating search button */
    & #floating-search-btn {
        background-color: var(--color-surface-elevated);
        color: var(--text-color);
        border: 1px solid var(--color-border);
    }

    & #floating-search-btn:hover {
        background-color: var(--accent-color);
        color: #ffffff;
    }

    /* Reply link */
    & .comment-reply-link {
        color: var(--accent-color);
    }

    /* Submit button */
    & input[type="submit"],
    & button[type="submit"] {
        background-color: var(--accent-color);
        color: #ffffff;
    }

    /* Code blocks */
    & pre,
    & code,
    & .wp-block-code,
    & .wp-block-preformatted {
        background-color: var(--color-surface-elevated);
        color: var(--text-color);
    }

    & pre code {
        background-color: transparent;
    }

    /* Blog post titles */
    & .entry-title,
    & .entry-title a,
    & h1.entry-title,
    & h1.page-title,
    & h2.entry-title,
    & h2.entry-title a {
        color: var(--primary-color);
    }

    & .entry-title a:hover,
    & h2.entry-title a:hover {
        color: var(--accent-color);
    }

    /* Blog post meta (date, category, author) */
    & .entry-meta,
    & .entry-meta a,
    & .entry-date,
    & .entry-date a,
    & .cat-links,
    & .cat-links a,
    & .author a,
    & .posted-on a,
    & .byline a {
        color: var(--color-text-muted);
    }

    & .entry-meta a:hover,
    & .cat-links a:hover,
    & .posted-on a:hover {
        color: var(--accent-color);
    }
}

/* System preference version - same rules */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Header/Banner */
        & header,
        & .site-header,
        & [role="banner"] {
            background-color: var(--background-color);
        }

        /* Main content wrapper (Gambit parent theme) */
        & .site-content,
        & .site-content-wrap,
        & .content-area {
            background-color: var(--background-color);
        }

        /* Site tagline */
        & .site-description {
            color: var(--color-text-muted);
        }

        /* All cards and elevated surfaces */
        & .product-card,
        & .tech-category,
        & .timeline-content,
        & .credential-item,
        & .connect-link,
        & .category-pill {
            background-color: var(--color-surface-elevated);
            color: var(--text-color);
        }

        /* CTA buttons */
        & .product-cta {
            color: #ffffff;
            background-color: var(--accent-color);
        }

        /* Category pills hover */
        & .category-pill:hover {
            background-color: var(--accent-color);
            color: #ffffff;
        }

        /* Connect links hover */
        & .connect-link:hover {
            background-color: var(--accent-color);
            color: #ffffff;
        }

        /* Form inputs */
        & input[type="text"],
        & input[type="email"],
        & input[type="url"],
        & input[type="search"],
        & textarea,
        & select {
            background-color: var(--color-surface);
            color: var(--text-color);
            border-color: var(--color-border);
        }

        & input::placeholder,
        & textarea::placeholder {
            color: var(--color-text-subtle);
        }

        /* Comments */
        & .comment,
        & .comment-body,
        & .comment-content {
            background-color: transparent;
            color: var(--text-color);
        }

        & .comment-author,
        & .comment-metadata {
            color: var(--color-text-muted);
        }

        & .comment-metadata a {
            color: var(--color-text-subtle);
        }

        /* Floating search button */
        & #floating-search-btn {
            background-color: var(--color-surface-elevated);
            color: var(--text-color);
            border: 1px solid var(--color-border);
        }

        & #floating-search-btn:hover {
            background-color: var(--accent-color);
            color: #ffffff;
        }

        /* Reply link */
        & .comment-reply-link {
            color: var(--accent-color);
        }

        /* Submit button */
        & input[type="submit"],
        & button[type="submit"] {
            background-color: var(--accent-color);
            color: #ffffff;
        }

        /* Code blocks */
        & pre,
        & code,
        & .wp-block-code,
        & .wp-block-preformatted {
            background-color: var(--color-surface-elevated);
            color: var(--text-color);
        }

        & pre code {
            background-color: transparent;
        }

        /* Blog post titles */
        & .entry-title,
        & .entry-title a,
        & h1.entry-title,
        & h1.page-title,
        & h2.entry-title,
        & h2.entry-title a {
            color: var(--primary-color);
        }

        & .entry-title a:hover,
        & h2.entry-title a:hover {
            color: var(--accent-color);
        }

        /* Blog post meta (date, category, author) */
        & .entry-meta,
        & .entry-meta a,
        & .entry-date,
        & .entry-date a,
        & .cat-links,
        & .cat-links a,
        & .author a,
        & .posted-on a,
        & .byline a {
            color: var(--color-text-muted);
        }

        & .entry-meta a:hover,
        & .cat-links a:hover,
        & .posted-on a:hover {
            color: var(--accent-color);
        }
    }
}

/* =============================================
   SMOOTH TRANSITIONS
   ============================================= */

body,
body * {
    transition: background-color 0.3s ease,
                border-color 0.3s ease,
                color 0.3s ease;
}