/* ============================================================
   EDU Расписание — токены оформления.

   Единственное место, где заданы цвета, скругления, тени и поля.
   Все остальные css-файлы обязаны брать значения отсюда через var(),
   свои hex-константы в них не заводить: смена стиля должна оставаться
   правкой одного файла.

   Подключается ПЕРВЫМ, до style.css и стилей страниц.
   ============================================================ */

:root {
    /* --- Шрифт --------------------------------------------------------- */
    /* Golos Text лежит в static/fonts (см. fonts.css), Segoe UI — запасной
       на случай, если woff2 не загрузился. */
    --font: "Golos Text", "Segoe UI", system-ui, sans-serif;

    /* --- Цвета --------------------------------------------------------- */
    --ink: #111;           /* основной текст, заголовки */
    --ink-2: #2a2a27;      /* подзаголовки и текст в таблицах */
    --muted: #6f6f6b;      /* второстепенный текст: 5.3:1 на белом — выше AA */
    --line: #e4e4e1;       /* границы карточек, полей ввода, таблиц */
    --line-soft: #efefec;  /* тонкие разделители: шапка, строки таблиц */

    --bg: #fff;            /* полотно приложения */
    --bg-soft: #f5f5f3;    /* заливка шапок таблиц, ховеров, чипов */
    --bg-page: #e9ebee;    /* фон за полотном */

    /* Акцент — янтарный. На белом читается только тёмный вариант
       (--amber-ink, 5.6:1); сам --amber применяется как заливка под
       чёрным текстом (12.4:1), а не как цвет текста. */
    --amber: #e8b64c;
    --amber-hover: #f0c568;
    --amber-soft: #fdf4e1;
    --amber-ink: #7d5a0e;

    /* Состояния: выполнено / ошибка / предупреждение */
    --green: #2f9e5f;
    --green-ink: #1e7a45;
    --green-soft: #eaf6ee;
    --green-line: #c6e6d3;

    --red: #d4574a;
    --red-ink: #9b2c22;
    --red-soft: #fbecea;
    --red-line: #f2d3ce;

    --blue-ink: #1f6fa8;   /* информационные сообщения */
    --blue-soft: #eaf4fd;
    --blue-line: #cfe6f7;

    /* Совместимость: --accent используется в старых правилах как
       «цвет активного элемента». Держим его синонимом акцента. */
    --accent: var(--amber);

    /* --- Геометрия ----------------------------------------------------- */
    --r-card: 16px;   /* карточки, модальные окна */
    --r-btn: 22px;    /* кнопки-пилюли (половина высоты 44) */
    --r-input: 12px;  /* поля ввода */
    --r-sm: 8px;      /* мелкие плашки, ячейки */

    /* Полотно тянется на всю ширину окна: сетке расписания и матрице
       тарификации нужен весь экран. --page-min — предел, ниже которого
       появляется горизонтальная прокрутка, а вёрстка не перестраивается
       (медиазапросов по ширине в проекте нет).
       Поля растут вместе с окном: 24px на узком, до 56px на широком. */
    --page-min: 1120px;
    --pad: clamp(24px, 2.6vw, 56px);

    /* Предел ширины для читаемого текста (лендинг, документы, длинные
       пояснения): строка в 2000px не читается. */
    --text-width: 1280px;

    /* --- Тени ---------------------------------------------------------- */
    --shadow-sm: 0 1px 3px rgba(17, 17, 17, .06);
    --shadow-md: 0 6px 24px rgba(17, 17, 17, .09);
    --shadow-lg: 0 16px 48px rgba(17, 17, 17, .16);

    /* --- Серые подсказки (.muted и однотипные .*-hint/.*-note) --------- */
    --hint-size: 14px;
    --hint-color: var(--muted);
}