:root {
    --surface: #fff;
    --surface-raised: #fff;
    --surface-sunken: #FAFBFC;
    --surface-head: var(--gray-50);
    --border: var(--gray-200);
    --border-soft: var(--gray-100);
    --text: var(--nero);
    --text-muted: var(--gray-500);
    --text-faint: var(--gray-400);
    --hover: var(--gray-100);
    --accent-soft: var(--emerald-100);
    --accent-text: var(--emerald-800);
    --avatar-bg: var(--nero);
    --avatar-text: #fff;
    --shadow-menu: 0 4px 8px rgba(11, 11, 15, .04), 0 16px 40px rgba(11, 11, 15, .10);
    --alert-bg: #FDECEB;
    --alert-text: #B3241D;
    --violet-soft: #F1EBFE;
    --violet-text: #6D3BD4;
    /* Подложка целой строки: заметно, но не спорит с текстом. */
    --violet-tint: #FAF7FF;
    --sky-soft: #E7F1FE;
    --sky-text: #1B5FB8;
}

:root[data-theme='dark'] {
    --surface: #0D0E12;
    --surface-raised: #16181D;
    --surface-sunken: #101216;
    --surface-head: #14171C;
    --border: #262A31;
    --border-soft: #1E2127;
    --text: #F4F5F2;
    --text-muted: #8A93A1;
    --text-faint: #5B6472;
    --hover: #1E2127;
    --accent-soft: #0A3D2C;
    --accent-text: var(--emerald-300);
    --avatar-bg: var(--emerald-700);
    --avatar-text: #fff;
    --shadow-menu: 0 4px 8px rgba(0, 0, 0, .30), 0 16px 40px rgba(0, 0, 0, .45);
    --alert-bg: #3A1A18;
    --alert-text: #F5A29D;
    --violet-soft: #2A1F45;
    --violet-text: #C4AEFB;
    --violet-tint: #191630;
    --sky-soft: #16283F;
    --sky-text: #8FC0F5;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
        --surface: #0D0E12;
        --surface-raised: #16181D;
        --surface-sunken: #101216;
        --surface-head: #14171C;
        --border: #262A31;
        --border-soft: #1E2127;
        --text: #F4F5F2;
        --text-muted: #8A93A1;
        --text-faint: #5B6472;
        --hover: #1E2127;
        --accent-soft: #0A3D2C;
        --accent-text: var(--emerald-300);
        --avatar-bg: var(--emerald-700);
        --avatar-text: #fff;
        --shadow-menu: 0 4px 8px rgba(0, 0, 0, .30), 0 16px 40px rgba(0, 0, 0, .45);
        --alert-bg: #3A1A18;
        --alert-text: #F5A29D;
        --violet-soft: #2A1F45;
        --violet-text: #C4AEFB;
        --violet-tint: #191630;
    --sky-soft: #16283F;
    --sky-text: #8FC0F5;
    }
}

:root {
    color-scheme: light;
}

:root[data-theme='dark'] {
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
        color-scheme: dark;
    }
}

.brand {
    display: inline-flex;
}

.brand img {
    width: 100%;
}

.brand img.brand-dark {
    display: none;
}

:root[data-theme='dark'] .brand img.brand-light {
    display: none;
}

:root[data-theme='dark'] .brand img.brand-dark {
    display: block;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) .brand img.brand-light {
        display: none;
    }

    :root:not([data-theme='light']) .brand img.brand-dark {
        display: block;
    }
}

/*
 * Подпись разработчика. Живёт здесь, а не в app.css: компонент общий и
 * стоит в том числе на странице входа, где app.css не подключается.
 *
 * Приглушена сильнее обычного текста футера — это копирайт, он не должен
 * спорить с содержимым страницы.
 */
/* a.made-by, а не .made-by: Bootstrap красит ссылки своим синим, и по
   специфичности одиночный класс ему проигрывает. */
a.made-by {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--text-faint);
    text-decoration: none;
    transition: color .15s;
}

a.made-by:hover {
    color: var(--text-muted);
}

.made-by-logo {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    flex: none;
}