/* ============================================================
   INITIAL THEME PAINT
   Applied before the page content is parsed by the head bootstrap.
   ============================================================ */
html {
    background-color: #ffffff;
    color-scheme: light;
}

html.dark-mode {
    background-color: #121212;
    color-scheme: dark;
}

html.dark-mode body.serviceBody {
    background-color: #121212;
    background-image: linear-gradient(135deg, #121212 0%, #1f1f1f 100%);
    color: #ffffff;
}

/* Disable only initial theme transitions; normal animation remains intact. */
html.theme-preload,
html.theme-preload body,
html.theme-preload body *,
html.theme-preload body *::before,
html.theme-preload body *::after {
    transition: none !important;
}

/* Make the correct logo available before deferred JavaScript runs. */
#logo-dark {
    display: none;
}

html.dark-mode #logo {
    display: none;
}

html.dark-mode #logo-dark {
    display: inline;
}

/* ============================================================
   DARK MODE VARIABLES
   ============================================================ */
html.dark-mode,
body.dark-mode {
    --primary-gradient: linear-gradient(
        135deg,
        #232526 0%,
        #414345 100%
    );

    --primary-background: linear-gradient(
        135deg,
        #121212 0%,
        #1f1f1f 100%
    );

    --box-background-image: #1f1f1f;

    --header-background: linear-gradient(
        135deg,
        #2c2c2c 0%,
        #151515 100%
    );

    --text-color: #ffffff;
    --text-secondary-color: #1c1c1c;
    --box-shadow-color: rgba(255, 255, 255, 0.25);

    /* Cards */
    --card-gradient: #1f1f1f;
    --accent-gradient: #2a2a2a;
    --text-muted: #b0b0b0;
    --text-strong: #ffffff;

    /* Links */
    --link-color: #7aaaff;
    --link-hover-color: #aac8ff;
    --link-visited-color: #cc9955;

    /* Navbar */
    --nav-link-color: #6198f8;
    --nav-link-hover-color: #3e3c3ba6;
    --nav-link-visited-color: #cc9955;
    --nav-compact-hover-color: rgba(87, 108, 113, 0.498);

    /* Service Links */
    --service-link-color: #7aaaff;
    --service-link-hover-color: #aac8ff;
}

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

.theme-toggle {
    position: fixed;
    bottom: 1.25rem;
    left: 1.25rem;

    width: 48px;
    height: 48px;

    border: 2px solid rgba(0, 0, 0, 0.15);
    border-radius: 50%;

    font-size: 1.35rem;
    line-height: 1;

    cursor: pointer;
    z-index: 10000;

    background: var(--card-gradient, #ffffff);

    /* Corrected --box-shado-md typo */
    box-shadow: var(
        --box-shadow-md,
        0 4px 10px rgba(0, 0, 0, 0.15)
    );

    display: flex;
    align-items: center;
    justify-content: center;

    user-select: none;

    /*
     * Required for reliable dragging with mouse, touch,
     * and stylus input.
     */
    touch-action: none;

    /*
     * Removes the default mobile tap highlight.
     */
    -webkit-tap-highlight-color: transparent;

    transition:
        transform var(--transition-fast, 0.2s ease),
        box-shadow var(--transition-base, 0.3s ease),
        background 0.3s ease;
}

.theme-toggle:hover {
    transform: scale(1.1) rotate(15deg);

    box-shadow: var(
        --box-shadow-lg,
        0 6px 15px rgba(0, 0, 0, 0.25)
    );
}

.theme-toggle:active {
    transform: scale(0.96);
}

.theme-toggle:focus-visible {
    outline: 3px solid #4a90e2;
    outline-offset: 3px;
}

/* ============================================================
   DARK MODE COMPONENT OVERRIDES
   ============================================================ */

html.dark-mode .theme-toggle,
body.dark-mode .theme-toggle {
    background: var(--toggle-bg-dark, rgb(53, 53, 53));
    border-color: rgba(255, 255, 255, 0.15);
}

html.dark-mode .menuBtn,
body.dark-mode .menuBtn {
    background: var(--accent-gradient);
    border: 2px solid var(--link-hover-color);
}

html.dark-mode .menuBtn:hover,
body.dark-mode .menuBtn:hover {
    background: var(--nav-compact-hover-color);
}

html.dark-mode .services-list li:hover,
body.dark-mode .services-list li:hover {
    border-color: var(--accent-blue);
}

html.dark-mode .slide:hover,
body.dark-mode .slide:hover {
    border-color: var(--accent-blue);
}