/* Токены оформления — единственное место, где заданы цвета, отступы и шрифты.
   Меняешь значение здесь — меняется на всех экранах сразу.

   Палитра: светлая база, холодные голубые акценты, тёмно-синий текст.
   Строгость банковского кабинета без черноты и тяжести. */

:root {
    /* Фон и поверхности */
    --bg: #f4f7fb;            /* фон страницы — прохладный, чуть голубой */
    --surface: #ffffff;       /* карточки, таблицы */
    --surface-muted: #f8fafd; /* шапки таблиц, полосы, подложки */
    --border: #e2e9f2;        /* основные линии */
    --border-strong: #cfd9e6; /* границы полей ввода */

    /* Текст */
    --text: #14263c;          /* тёмно-синий вместо чёрного: мягче для глаз */
    --text-muted: #6a7c94;    /* подписи, второстепенное */
    --text-faint: #94a3b8;    /* совсем тихое: подсказки, плейсхолдеры */

    /* Акцент — свежий голубой */
    --accent: #2f80d8;
    --accent-hover: #2469b8;
    --accent-soft: #e8f2fd;   /* подложка активного, выделения */
    --accent-line: #7db6ee;

    /* Смысловые цвета сумм */
    --positive: #17976a;      /* приход, закрытые расчёты */
    --positive-soft: #e6f6ef;
    --debt: #c2631c;          /* долг компании — тёплый, но не тревожный */
    --debt-soft: #fdf1e6;
    --danger: #c0392b;        /* ошибки, удаление */
    --danger-soft: #fdecea;

    /* Типографика */
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-size: 15px;
    --font-size-sm: 13px;
    --font-size-xs: 11.5px;
    --line: 1.5;

    /* Скругления и тени — сдержанные, без «пузырей» */
    --radius: 8px;
    --radius-sm: 6px;
    --shadow: 0 1px 2px rgba(20, 38, 60, 0.04), 0 1px 8px rgba(20, 38, 60, 0.04);
    --shadow-raised: 0 2px 6px rgba(20, 38, 60, 0.07);

    /* Отступы */
    --gap-xs: 4px;
    --gap-sm: 8px;
    --gap: 16px;
    --gap-lg: 24px;
    --gap-xl: 32px;

    /* Ширина рабочей области */
    --page-width: 1240px;
}