/* ============================================================
   Дизайн-система
   ------------------------------------------------------------
   Один слой токенов, дальше всё строится только на нём. До этого
   значения жили россыпью по файлу и по шаблонам: 38 хардкодов
   акцентного цвета в разметке, радиусы 4/6/8/10/12/16 вперемешку,
   восемь оттенков серого. Менять акцент или плотность интерфейса
   приходилось руками в десятках мест.
   ============================================================ */

:root {
    /* --- Поверхности и текст -------------------------------- */
    --bg: #f5f6f8;
    --surface: #ffffff;
    --surface-2: #f7f8fa;
    --border: #e7e9ee;
    --border-strong: #d5d9e0;

    --text: #14161a;   /* заголовки, ключевые значения */
    --text-2: #5c6370; /* основной текст, описания      */
    --text-3: #8a909c; /* подписи, вспомогательное      */

    /* --- Один акцент ---------------------------------------- */
    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --accent-press: #1e40af;
    --accent-soft: #eff4ff;
    --accent-border: #c9dafd;

    /* --- Семантика (состояния, не второй акцент) ------------ */
    --on-accent: #ffffff;   /* текст и элементы на залитых акцентом поверхностях */

    --success: #15803d;
    --success-text: #166534; /* текст на светло-зелёном фоне */
    --success-soft: #f1fdf4;
    --success-border: #bbf7d0;
    --danger: #dc2626;
    --danger-text: #991b1b;  /* текст на светло-красном фоне */
    --danger-soft: #fef2f2;
    --danger-border: #fecaca;
    --warning: #b45309;
    --warning-soft: #fffbeb;
    --warning-border: #fde68a;

    /* --- Сетка 8px ------------------------------------------ */
    --s1: 4px;
    --s2: 8px;
    --s3: 16px;
    --s4: 24px;
    --s5: 32px;
    --s6: 48px;

    /* --- Радиусы -------------------------------------------- */
    --r-xs: 6px;   /* бейджи, пилюли        */
    --r-sm: 8px;   /* поля ввода            */
    --r-md: 12px;  /* карточки, кнопки      */
    --r-lg: 16px;  /* модальные окна        */
    --r-full: 999px;

    /* --- Тени: мягкие и рассеянные -------------------------- */
    --e1: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .05);
    --e2: 0 4px 20px rgba(16, 24, 40, .06);
    --e3: 0 16px 40px rgba(16, 24, 40, .12);
    --ring: 0 0 0 3px rgba(37, 99, 235, .25);

    /* --- Типографика ---------------------------------------- */
    --f-h1: 24px;
    --f-h2: 17px;
    --f-h3: 15px;
    --f-body: 14px;
    --f-sm: 13px;
    --f-xs: 12px;

    --lh-tight: 1.25;  /* заголовки            */
    --lh-body: 1.55;   /* текстовые блоки      */

    --t-fast: .15s ease;
    --t-base: .2s ease;
}