/* ==========================================================================
   Dark Mode — Variable overrides & component adjustments
   ========================================================================== */

/* --- Auto-detect: OS dark preference (unless user explicitly chose light) --- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-primary: #4d7fdb;
        --color-primary-dark: #6b9ae8;
        --color-primary-light: #1a2a50;
        --color-primary-rgb: 77, 127, 219;

        --color-accent-dark: #00e8c6;
        --color-accent-light: #0f2a26;

        --color-text: #e8eaf0;
        --color-text-light: #a0aab8;
        --color-text-muted: #7a8494;

        --color-bg: #0f1729;
        --color-bg-alt: #1a2444;
        --color-bg-dark: #0a0f1e;

        --color-border: #2a3550;
        --color-border-light: #1f2d45;

        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 8px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
        --shadow-lg: 0 10px 20px -3px rgba(0, 0, 0, 0.5), 0 4px 8px -4px rgba(0, 0, 0, 0.3);

        /* Badge semantic variables */
        --badge-custody-bg: #3d2e0a;
        --badge-custody-text: #fbbf24;
        --badge-difficulty-bg: #0a2e1a;
        --badge-difficulty-text: #4ade80;
        --badge-cip-bg: #1e1640;
        --badge-cip-text: #a78bfa;
        --badge-error-bg: #2e0a0a;
        --badge-error-text: #f87171;

        /* Guide difficulty badges */
        --badge-difficulty-beginner-bg: #0a2e1a;
        --badge-difficulty-beginner-text: #4ade80;
        --badge-difficulty-beginner-border: #166534;
        --badge-difficulty-intermediate-bg: #3d2e0a;
        --badge-difficulty-intermediate-text: #fbbf24;
        --badge-difficulty-intermediate-border: #92400e;
        --badge-difficulty-advanced-bg: #2e0a0a;
        --badge-difficulty-advanced-text: #f87171;
        --badge-difficulty-advanced-border: #991b1b;

        color-scheme: dark;
    }

    /* Header dark glassmorphism */
    :root:not([data-theme="light"]) .site-header {
        background-color: rgba(15, 23, 41, 0.9);
        border-bottom-color: var(--color-border);
    }

    /* Mobile nav dropdown */
    @media (max-width: 768px) {
        :root:not([data-theme="light"]) .primary-navigation {
            background: var(--color-bg);
        }
    }

    /* Pill count in filters */
    :root:not([data-theme="light"]) .pill-count {
        background: rgba(255, 255, 255, 0.1);
    }

    /* Autofill override */
    :root:not([data-theme="light"]) input:-webkit-autofill,
    :root:not([data-theme="light"]) input:-webkit-autofill:hover,
    :root:not([data-theme="light"]) input:-webkit-autofill:focus {
        -webkit-text-fill-color: var(--color-text);
        -webkit-box-shadow: 0 0 0px 1000px var(--color-bg-alt) inset;
        transition: background-color 5000s ease-in-out 0s;
    }
}

/* --- Manual override: user explicitly chose dark --- */
[data-theme="dark"] {
    --color-primary: #4d7fdb;
    --color-primary-dark: #6b9ae8;
    --color-primary-light: #1a2a50;
    --color-primary-rgb: 77, 127, 219;

    --color-accent-dark: #00e8c6;
    --color-accent-light: #0f2a26;

    --color-text: #e8eaf0;
    --color-text-light: #a0aab8;
    --color-text-muted: #7a8494;

    --color-bg: #0f1729;
    --color-bg-alt: #1a2444;
    --color-bg-dark: #0a0f1e;

    --color-border: #2a3550;
    --color-border-light: #1f2d45;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 8px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 20px -3px rgba(0, 0, 0, 0.5), 0 4px 8px -4px rgba(0, 0, 0, 0.3);

    /* Badge semantic variables */
    --badge-custody-bg: #3d2e0a;
    --badge-custody-text: #fbbf24;
    --badge-difficulty-bg: #0a2e1a;
    --badge-difficulty-text: #4ade80;
    --badge-cip-bg: #1e1640;
    --badge-cip-text: #a78bfa;
    --badge-error-bg: #2e0a0a;
    --badge-error-text: #f87171;

    /* Guide difficulty badges */
    --badge-difficulty-beginner-bg: #0a2e1a;
    --badge-difficulty-beginner-text: #4ade80;
    --badge-difficulty-beginner-border: #166534;
    --badge-difficulty-intermediate-bg: #3d2e0a;
    --badge-difficulty-intermediate-text: #fbbf24;
    --badge-difficulty-intermediate-border: #92400e;
    --badge-difficulty-advanced-bg: #2e0a0a;
    --badge-difficulty-advanced-text: #f87171;
    --badge-difficulty-advanced-border: #991b1b;

    color-scheme: dark;
}

/* Header dark glassmorphism */
[data-theme="dark"] .site-header {
    background-color: rgba(15, 23, 41, 0.9);
    border-bottom-color: var(--color-border);
}

/* Mobile nav dropdown */
@media (max-width: 768px) {
    [data-theme="dark"] .primary-navigation {
        background: var(--color-bg);
    }
}

/* Pill count in filters */
[data-theme="dark"] .pill-count {
    background: rgba(255, 255, 255, 0.1);
}

/* Autofill override */
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill:hover,
[data-theme="dark"] input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--color-text);
    -webkit-box-shadow: 0 0 0px 1000px var(--color-bg-alt) inset;
    transition: background-color 5000s ease-in-out 0s;
}

/* ==========================================================================
   Theme toggle button
   ========================================================================== */

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--color-text);
    transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.theme-toggle:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.theme-toggle svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Icon visibility: moon in light, sun in dark */
.theme-toggle .icon-sun {
    display: none;
}

.theme-toggle .icon-moon {
    display: block;
}

@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;
    }
}

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

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

[data-theme="light"] .theme-toggle .icon-sun {
    display: none;
}

[data-theme="light"] .theme-toggle .icon-moon {
    display: block;
}

/* ==========================================================================
   Smooth transition — only during user-initiated toggles
   ========================================================================== */

.theme-transition,
.theme-transition *,
.theme-transition *::before,
.theme-transition *::after {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}