/* Единая система оформления сайта. Значения взяты из docs/design-system.md —
   он единственный источник, здесь только перенос в CSS.

   Тема переключается атрибутом data-theme на <html>. По умолчанию тёмная: это
   выбор продукта, а не следствие системной настройки, поэтому prefers-color-scheme
   здесь намеренно не используется — иначе пользователь со светлой системой видел бы
   не то, что в приложении. */

:root,
:root[data-theme="dark"] {
    --mv-bg: #12141A;
    --mv-panel: #1B1E26;
    --mv-panel-2: #22262F;
    --mv-text: #E9ECF1;
    --mv-muted: #9AA3B2;
    --mv-accent: #4C8DFF;
    --mv-accent-text: #FFFFFF;
    --mv-border: #2C313C;
    --mv-danger: #FF8D8A;
    --mv-success: #51CF66;

    --mv-radius: 14px;
    --mv-radius-sm: 10px;

    /* Высота поля, списка и иконочной кнопки — одна: иначе строка фильтра
       выглядит собранной из разных наборов. */
    --mv-control-h: 40px;
}

:root[data-theme="light"] {
    --mv-bg: #F6F7FB;
    --mv-panel: #FFFFFF;
    --mv-panel-2: #EEF1F7;
    --mv-text: #14171F;
    --mv-muted: #5B6472;
    --mv-accent: #2F6FDC;
    --mv-accent-text: #FFFFFF;
    --mv-border: #D7DCE6;
    --mv-danger: #D9534F;
    --mv-success: #2F9E44;
}

/* Размер считается по рамке: иначе заданная высота поля и его отступы
   складываются, и поле становится выше кнопки рядом. */
*, *::before, *::after { box-sizing: border-box; }

/* — иконки — */

/* Шрифт локальный: внешний запрос к Google на каждой странице означал бы, что
   интерфейс зависит от доступности чужого сервиса. */
@font-face {
    font-family: "Material Symbols Rounded";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("../../fonts/material-symbols.woff2") format("woff2");
}

.mv-i {
    font-family: "Material Symbols Rounded";
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
    user-select: none;
}

.mv-i--sm { font-size: 20px; }

/* — кнопки — */

/* Основная форма действия на сайте: иконка. Текст остаётся там, где иконка
   непонятна без подписи, поэтому .mv-btn существует, но применяется редко. */
.mv-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--mv-control-h);
    height: var(--mv-control-h);
    padding: 0;
    border: 0;
    border-radius: var(--mv-radius-sm);
    background: var(--mv-panel-2);
    color: var(--mv-text);
    cursor: pointer;
}
.mv-icon-btn:hover { background: var(--mv-border); }
.mv-icon-btn--ghost { background: transparent; }
.mv-icon-btn--ghost:hover { background: var(--mv-panel-2); }
.mv-icon-btn--accent { background: var(--mv-accent); color: var(--mv-accent-text); }
.mv-icon-btn--danger { background: transparent; color: var(--mv-danger); }
.mv-icon-btn--danger:hover { background: rgba(217, 83, 79, .12); }
.mv-icon-btn[aria-pressed="true"] { background: var(--mv-accent); color: var(--mv-accent-text); }

.mv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: var(--mv-control-h);
    padding: 0 14px;
    border: 0;
    border-radius: var(--mv-radius-sm);
    background: var(--mv-panel-2);
    color: var(--mv-text);
    font: inherit;
    font-size: .92rem;
    text-decoration: none;
    cursor: pointer;
}
.mv-btn:hover { background: var(--mv-border); }
.mv-btn--accent { background: var(--mv-accent); color: var(--mv-accent-text); }

/* — поля ввода — */
/* Галочка — один вид на все списки: темы, примеры, выражения. */
.mv-check {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--mv-accent);
    cursor: pointer;
}

.mv-input,
.mv-select {
    height: var(--mv-control-h);
    padding: 0 12px;
    border: 1px solid var(--mv-border);
    border-radius: var(--mv-radius-sm);
    background: var(--mv-panel-2);
    color: var(--mv-text);
    font: inherit;
}
.mv-input:focus,
.mv-select:focus { outline: 2px solid var(--mv-accent); outline-offset: 1px; }