/*========================================
  Светлая
========================================*/
.light {

    --body-background: #fff;
    --body-color: #000;

    --header-background: #fff;

    --enter-btn-background-1: #b4b4b9;
    --enter-btn-background-2: #a5a5aa;
    --enter-btn-background-3: #96969b;
    --enter-btn-color: #f0f0f5;
    --enter-btn-background-hover-1: #bebec3;
    --enter-btn-background-hover-2: #afafb4;
    --enter-btn-background-hover-3: #a0a0a5;

    --app-background-1: #b4b4b9;
    --app-background-2: #a5a5aa;
    --app-background-3: #96969b;
    --app-color: #f0f0f5;
    --app-background-hover-1: #bebec3;
    --app-background-hover-2: #afafb4;
    --app-background-hover-3: #a0a0a5;

    --theme-background-1: #b4b4b9;
    --theme-background-2: #a5a5aa;
    --theme-background-3: #96969b;
    --theme-color: #f0f0f5;
    --theme-background-hover-1: #bebec3;
    --theme-background-hover-2: #afafb4;
    --theme-background-hover-3: #a0a0a5;

}

/*========================================
  Тёмная
========================================*/
.dark {

    --body-background: #141419;
    --body-color: #c8c8cd;

    --header-background: #141419;

    --enter-btn-background-1: #46464b;
    --enter-btn-background-2: #37373c;
    --enter-btn-background-3: #28282d;
    --enter-btn-color: #d2d2d7;
    --enter-btn-background-hover-1: #505055;
    --enter-btn-background-hover-2: #414146;
    --enter-btn-background-hover-3: #323237;

    --app-background-1: #46464b;
    --app-background-2: #37373c;
    --app-background-3: #28282d;
    --app-color: #d2d2d7;
    --app-background-hover-1: #505055;
    --app-background-hover-2: #414146;
    --app-background-hover-3: #323237;

    --theme-background-1: #46464b;
    --theme-background-2: #37373c;
    --theme-background-3: #28282d;
    --theme-color: #d2d2d7;
    --theme-background-hover-1: #505055;
    --theme-background-hover-2: #414146;
    --theme-background-hover-3: #323237;

}

/*========================================
  Общие стили
========================================*/
* {
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-family: 'Roboto', sans-serif;
    letter-spacing: 0.03125rem;
    font-size: 1rem;
    font-weight: 400;
    background: var(--body-background);
    color: var(--body-color);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    min-height: 100dvh;
    transition: background 0.5s ease, color 0.5s ease;
}

/*========================================
  Верхний блок
========================================*/
header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background: var(--header-background);
    padding: 1.25rem;
    gap: 1.25rem;
    transition: background 0.5s ease;
}

/*========================================
  Кнопка войти
========================================*/
.enter-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-family: 'Roboto', sans-serif;
    letter-spacing: 0.03125rem;
    font-size: 1.125rem;
    font-weight: 400;
    max-width: 100%;
    height: 2.5rem;
    background: linear-gradient(180deg, 
        var(--enter-btn-background-1) 0%,
        var(--enter-btn-background-2) 50%,
        var(--enter-btn-background-3) 100%
    );
    color: var(--enter-btn-color);
    border: none;
    border-radius: 6.25rem;
    padding: 0 1.25rem;
    cursor: pointer;
    transition: background 0.5s ease, color 0.5s ease;
}

.enter-btn:hover {
    background: linear-gradient(180deg, 
        var(--enter-btn-background-hover-1) 0%,
        var(--enter-btn-background-hover-2) 50%,
        var(--enter-btn-background-hover-3) 100%
    );
}

/*========================================
  Приложения
========================================*/
.app {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    line-height: 1;
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(180deg, 
        var(--app-background-1) 0%,
        var(--app-background-2) 50%,
        var(--app-background-3) 100%
    );
    color: var(--app-color);
    border: none;
    border-radius: 6.25rem;
    padding: 0;
    margin: 0;
    cursor: pointer;
    transition: background 0.5s ease, color 0.5s ease;
}

.app svg {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    pointer-events: none;
}

.app:hover {
    background: linear-gradient(180deg, 
        var(--app-background-hover-1) 0%,
        var(--app-background-hover-2) 50%,
        var(--app-background-hover-3) 100%
    );
}

/*========================================
  Тема
========================================*/
.theme {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    line-height: 1;
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(180deg, 
        var(--app-background-1) 0%,
        var(--app-background-2) 50%,
        var(--app-background-3) 100%
    );
    color: var(--theme-color);
    border: none;
    border-radius: 6.25rem;
    padding: 0;
    margin: 0;
    cursor: pointer;
    transition: background 0.5s ease, color 0.5s ease;
}

.theme svg {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    pointer-events: none;
}

.theme:hover {
    background: linear-gradient(180deg, 
        var(--theme-background-hover-1) 0%,
        var(--theme-background-hover-2) 50%,
        var(--theme-background-hover-3) 100%
    );
}

/*========================================
  Центральный блок
========================================*/
main {
    
}

/*========================================
  Нижний блок
========================================*/
footer {
    
}