/* Токены общей визуальной системы skolvilla.ru.
 *
 * Единственный источник значений для шести приложений: Uinx, Board, Dayline,
 * AuthService, Skilltank, HomeAccounting. Файл не редактируется в проектах —
 * он приезжает скриптом из репозитория designsystem и перезаписывается при
 * следующем обновлении. Своё кладётся рядом, в собственный css проекта.
 *
 * Ориентир — три поверхности, из которых собрано всё остальное:
 *   1. поверхность      — заливка --card, рамка-волосок, радиус --r-surface, без тени;
 *   2. утопленное в неё — заливка --bg, тот же волосок, радиус --r-md;
 *   3. залитое акцентом — --accent на --accent-text, без рамки.
 * Четвёртого вида поверхности не заводить.
 *
 * Правило одно: любой цвет и размер берётся из переменной. Захардкоженный литерал
 * не переключится в тёмную тему — на этом уже спотыкались в Uinx дважды.
 */

:root {
  /* ── Цвет ───────────────────────────────────────────────────────────────── */
  --bg: #f4f5f7;      /* фон страницы и утопленных элементов */
  --card: #ffffff;    /* поверхность: карточка, панель */
  --text: #1a1d21;
  /* Чуть темнее унаследованного из Uinx #6b7280: тот давал на фоне страницы
     4,43:1 — ниже нормы AA для мелкого текста. Замерено 09.08.2026. */
  --muted: #666e7a;   /* второстепенный текст, подписи */
  --border: #e3e6ea;  /* рамка-волосок */

  /* Акцент разложен на роли. Значения совпадают — шов сделан заранее, чтобы
     заливку и текст можно было развести по контрасту, не трогая остальное. */
  --accent: #2f6fed;        /* заливка: главная кнопка, выделение */
  --accent-text: #ffffff;   /* текст на заливке */
  --accent-ink: #2f6fed;    /* акцент как текст и обводка на фоне страницы */
  --accent-hover: #2861d8;
  --accent-active: #2154bd;

  --error: #c0392b;
  --ok: #1e8449;
  --warn: #a05e00;   /* темнее «естественного» янтарного: светлее не проходит AA */

  /* Нейтральные подложки: серый с равными каналами не тянет цвет ни в одну
     сторону и одинаково читается на белой карточке и на акцентной заливке. */
  --wash: rgba(127, 127, 127, 0.14);
  --wash-strong: rgba(127, 127, 127, 0.18);
  --on-accent-muted: rgba(255, 255, 255, 0.78);
  --on-accent-wash: rgba(255, 255, 255, 0.18);
  --scrim: rgba(0, 0, 0, 0.45);   /* затемнение под модалкой */

  /* ── Типографика ────────────────────────────────────────────────────────── */
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", Consolas, monospace;

  /* Шкала тесная снизу и разреженная сверху. Низ (11–18) пришёл из Uinx, где
     интерфейс состоит из строк списка: там разница между 13 и 14 работает.
     Верх (20, 24) добавлен под Board и бухгалтерию — у страницы с таблицами
     есть заголовок, которому 18 мало. */
  --fs-micro: 11px;    /* бейдж, мета, подпись кнопки навигации */
  --fs-tiny: 12px;     /* подсказка под полем, счётчик */
  --fs-small: 13px;    /* мелкий текст, подпись поля */
  --fs-compact: 14px;  /* ошибки, статусная строка */
  --fs-base: 15px;     /* основной текст */
  --fs-title: 16px;    /* заголовок карточки и модалки */
  --fs-lead: 18px;     /* имя в карточке, крупная иконка */
  --fs-h2: 20px;       /* заголовок раздела */
  --fs-h1: 24px;       /* заголовок страницы */
  --fs-logo: 28px;     /* логотип на странице входа */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-base: 1.5;
  --lh-input: 1.4;   /* полуторный в однострочном поле распирает контрол */

  /* ── Шаг сетки ──────────────────────────────────────────────────────────── */
  /* N в имени и есть пиксели. Шаг 2 внизу, 4 наверху: в списках разница между
     10 и 12 видна, а округление всего до кратных 8 разносит строку на лишние
     6 px — на экране телефона это минус одна строка. */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;   /* разделение блоков на странице */
  --space-32: 32px;   /* поля крупных разделов */

  /* ── Радиусы ────────────────────────────────────────────────────────────── */
  /* Вложенное скругляется мельче объемлющего — иначе внутренний угол визуально
     протыкает внешний. */
  --r-badge: 4px;
  --r-sm: 6px;       /* компактные контролы, моноширинные врезки */
  --r-md: 8px;       /* контролы, строки списка */
  --r-pill: 10px;
  --r-surface: 12px; /* карточки, панели, модалка */
  --r-round: 50%;    /* аватар, круглая кнопка */

  /* ── Управляющие элементы ───────────────────────────────────────────────── */
  /* 40 px — нижняя граница пальца. Всё, что видно только на телефоне, делается
     40, даже если на десктопе аналогичный элемент 32. */
  --control-h: 40px;
  --control-h-sm: 32px;
  --field-pad-y: 9px;
  --field-pad-x: 11px;
  --btn-pad-y: 10px;
  --btn-pad-x: 16px;

  --avatar-sm: 30px;
  --avatar-md: 44px;
  --avatar-lg: 72px;
  --avatar-xl: 96px;

  /* ── Каркас ─────────────────────────────────────────────────────────────── */
  --gutter: 16px;    /* внешнее поле рабочей области */

  /* ── Состояния ──────────────────────────────────────────────────────────── */
  /* Фокус и выделение — всегда outline, никогда border: рамка меняет размер
     элемента и двигает соседей. */
  --hairline: 1px solid var(--border);
  --focus-ring: 2px solid var(--accent);
  --select-ring: 1px solid var(--accent);

  color-scheme: light dark;
}

/* ── Тёмная тема ──────────────────────────────────────────────────────────
   Переключается по системной настройке, ручного тумблера нет. Меняются только
   эти значения — всё остальное выведено из них. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16181d;
    --card: #1e2127;
    --text: #e8eaed;
    --muted: #9aa1ab;
    --border: #2c3038;

    --accent: #5b8def;
    --accent-text: #ffffff;
    --accent-ink: #5b8def;
    /* Наведение и нажатие светлее, а не темнее: затемнять уже тёмное нечем,
       и кнопка на нажатие переставала отзываться вовсе. */
    --accent-hover: #6d9bf2;
    --accent-active: #7fa9f7;

    --error: #e57373;
    --ok: #6ac47a;
    --warn: #d99b3a;
  }
}

/* Узкий экран. Единственная величина, которая меняется по медиазапросу.
   Блок обязан идти после тёмной темы: специфичность равная, побеждает
   объявленный последним, а медиазапрос специфичности не добавляет вовсе. */
@media (max-width: 720px) {
  :root {
    --gutter: 8px;
  }
}