:root {
    --color-bg-primary: #fff;
    --color-text-primary: #1F2936;
    --color-bg-dark: #1F2936;
    --color-bg-secondary: #A9B5DF;
    --color-hover-secondary: #e2e2fb;
    --theme-white: #fff;
    --theme-black: #000;
    --theme-track-bg: #695CFE;
    --theme-toggle-track: #c3d1ec;
}

body.theme-dark {
    --color-bg-primary: #111827;
    --color-text-primary: #F1F5F9;
    --color-bg-dark: #F1F5F9;
    --color-bg-secondary: #3D4859;
    --color-hover-secondary: #48566a;
    /* ----------header-------------------- */
    --ebhdr1-dark: #fff;
    /* ----------services-------------------- */
    --ebci2-white: #000;
    --ebci2-dark: #fff;
}

body {
    background: var(--color-bg-primary);
}

.theme-toggle {
    /* width: 100%; */
    min-height: 48px;


    display: flex;
    align-items: center;

    padding: 0 8px;

    border: none;
    border-radius: 8px;

    cursor: pointer;
    white-space: nowrap;

    color: var(--color-text-primary);
    background: var(--color-bg-secondary);

    transition: 0.3s ease;

    gap: 5px;

}

.theme-toggle:hover {
    background: var(--color-hover-secondary);
}

.theme-toggle .theme-label {
    display: flex;
    align-items: center;
    gap: 10px;
}

.theme-toggle .theme-label .theme-text {
    font-size: 1rem;
    transition: opacity 0.4s 0.2s ease;
}

.theme-toggle .theme-toggle-track {
    height: 24px;
    width: 48px;

    position: relative;

    margin-left: auto;

    border-radius: 999px;
    background: var(--theme-toggle-track);

    transition: opacity 0.4s 0.2s ease, background-color 0.3s ease;
}

body.dark-theme .theme-toggle-track {
    background: var(--theme-track-bg);
}

.theme-toggle-track .theme-toggle-indicator {
    position: absolute;

    top: 3px;
    left: 3px;

    width: 18px;
    height: 18px;

    border-radius: 50%;

    background-color: var(--theme-white);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    transition: transform 0.3s ease;
}

body.theme-dark .theme-toggle-indicator {
    transform: translateX(24px);
}