/*
 * Токены дизайн-системы Figma (файл AVT_Платформа, страница «Дизайн-система», node 7:7628).
 * Источник — компоненты Button, Input, Menu, Tag на момент сверки 28.08.2026.
 * Смотри .cursor/rules/stack.mdc за ссылкой на файл.
 *
 * Подключён в views/layout.php вместе с app.css. Пока используется точечно
 * (шапка/меню — экран «Рабочий стол куратора», node 102:16144), формы входа
 * и установки на старых переменных из app.css — их переход на дизайн-систему
 * оставлен отдельной задачей.
 */

:root {
    /* Цвета */
    --ds-color-black: #000000;      /* C2 */
    --ds-color-white: #ffffff;      /* C3 / C11 */
    --ds-color-gray: #b7b9be;       /* C4 — неактивный текст/плейсхолдер, неактивная кнопка */
    --ds-color-text-muted: #a1a1a1; /* вторичный текст (роль на карточке пользователя) */
    --ds-color-error: #ed3d22;      /* C5 — incorrect */
    --ds-color-success: #a5cd39;    /* C6 — correct */
    --ds-color-surface: #eaedf3;    /* C8 — фон неактивных полей, обычная рамка */
    --ds-color-menu-bg: #f2f9ff;    /* C1 / С1 — фон пунктов меню по умолчанию */
    --ds-color-accent-blue: #4285f4; /* C12 */

    /* Цвета лого-«вихря» (те же оттенки, что и в градиенте бренда ниже) */
    --ds-color-brand-purple: #5e58c6;
    --ds-color-brand-pink: #c248b7;
    --ds-color-brand-orange: #f77949;

    /* Градиент бренда: состояния pressed / selected (поверх белого фона) */
    --ds-gradient-brand:
        linear-gradient(270deg, rgba(94, 88, 198, .3) 0%, rgba(194, 72, 183, .3) 49.52%, rgba(247, 121, 73, .3) 100%),
        linear-gradient(90deg, #fff 0%, #fff 100%);

    /* Вариант градиента: selected_2 (холоднее, сине-фиолетовый) */
    --ds-gradient-brand-cool:
        linear-gradient(151.2deg, rgba(212, 155, 252, .3) 12.3%, rgba(139, 135, 240, .3) 50.7%, rgba(164, 242, 254, .3) 88%),
        linear-gradient(90deg, rgba(66, 133, 244, .1) 0%, rgba(66, 133, 244, .1) 100%);

    /* Типографика — везде Roboto, letter-spacing = 4% от размера шрифта */
    --ds-font-family: "Roboto", "Segoe UI", Tahoma, sans-serif;

    --ds-font-h1-size: 32px;         /* h1 — заголовки экранов */
    --ds-font-h1-weight: 600;
    --ds-font-h1-tracking: 0.04em;

    --ds-font-h3-size: 22px;         /* H3-1 — текст в больших кнопках/тегах */
    --ds-font-h3-weight: 600;
    --ds-font-h3-tracking: 0.04em;

    --ds-font-input-size: 22px;      /* h4 — текст в полях ввода */
    --ds-font-input-weight: 400;
    --ds-font-input-tracking: 0.04em;

    --ds-font-h4-size: 18px;         /* H4-1 — пункты меню, малые кнопки/теги */
    --ds-font-h4-weight: 600;
    --ds-font-h4-tracking: 0.04em;

    --ds-font-caption-size: 18px;    /* H4-2 — подсказки/капшены */
    --ds-font-caption-weight: 400;
    --ds-font-caption-tracking: 0.04em;

    /* Радиусы, рамки, отступы */
    --ds-radius: 8px;                /* везде: кнопки, поля, теги, карточки */
    --ds-border-width: 2px;          /* default/hover/selected/incorrect/correct */

    /* Размеры элементов */
    --ds-size-big: 64px;             /* высота big-кнопок/полей */
    --ds-size-small: 56px;           /* высота small-кнопок/полей */
    --ds-size-icon-big: 64px;        /* иконка-кнопка без текста, big */
    --ds-size-icon-small: 44px;      /* иконка-кнопка без текста, small */

    --ds-gap: 20px;                  /* между иконкой и текстом в кнопках */
    --ds-padding-tag: 12px 20px;     /* внутренние отступы тегов/кнопок */

    /* Тень hover — единый «неоморфный» эффект кнопок/тегов/пунктов меню */
    --ds-shadow-hover:
        7px 7px 8px rgba(0, 0, 0, .06),
        -7px -7px 8px rgba(255, 255, 255, .68);
}