/* Дизайн-токены «Экономика команды». Источник: стайлгайд Claude Design v0.1 + макеты R1.
   Правило: в шаблонах и CSS — только var(--…) отсюда; литералы цветов/отступов запрещены. */
:root {
  /* Фон и поверхности */
  --bg: #F6F2EA;            /* тёплая бумага — фон страницы */
  --surface: #FFFDF8;       /* карточки, таблицы, поля */
  --nav-bg: #FBF8F2;        /* левая навигация, групповые строки-подложки */
  --sunken: #EFEAE0;        /* шапка таблицы, утопленные блоки, наведение */
  --row-group: #F3EEE5;     /* строка-группа в таблице */
  --scrim: rgba(37, 34, 29, 0.28); /* затемнение под боковой панелью */

  /* Линии */
  --line: #E5DED1;          /* разделители, бордеры карточек */
  --line-strong: #D2C9B8;   /* бордеры полей и второстепенных кнопок, низ шапки таблицы */

  /* Текст */
  --ink: #25221D;
  --ink-2: #5C564C;         /* вторичный */
  --ink-3: #736B5E;         /* третичный, подписи */
  --ink-disabled: #A69D8D;

  /* Зелёный — действие и рост */
  --green-300: #9CC3A8;     /* текущий шаг в полосе шагов месяца */
  --green-600: #3D7355;     /* основная кнопка, акцент */
  --green-700: #33634A;     /* наведение */
  --green-800: #2A533D;     /* нажатие */
  --green-ink: #2C5A40;     /* зелёный текст */
  --green-soft: #E4EDDF;    /* активный пункт меню, бейдж «пирог» */
  --green-tint: #EEF3E8;    /* строка итогов */
  --green-wash: #F1F5EC;    /* акцентная KPI-карточка, полоса «новые строки» */
  --green-line: #CFDCC6;    /* бордеры на зелёном */
  --green-bar-extra: #A9C79A; /* полоска разовых в «Начислениях» карточки */
  --draft-row: #F7FAF3;     /* строка-черновик (+ inset 3px var(--green-600) слева) */
  --success-ink: #2C6B45;   /* «+» в изменениях */

  /* Янтарный — «проверь / временное / ждём» */
  --warning-500: #C98A1B;   /* точка, рамка поля с предупреждением */
  --warning-ink: #8A5300;
  --warning-soft: #FAEDD3;  /* бейдж */
  --warning-tint: #FBF1DC;  /* карточка-предупреждение */
  --warning-line: #E8C98B;
  --warning-field: #FFFBF2; /* фон поля с предупреждением */

  /* Красный — только нехватка денег и ошибки */
  --danger-600: #BF3B2F;    /* сплошной: опасная кнопка */
  --danger-ink: #A8322A;
  --danger-soft: #F9E4DF;
  --danger-line: #EDB9AF;    /* бордер аларма нехватки */

  /* Синий — «особый режим» (ИС, расчётная статья, инфо) */
  --info-ink: #2E5B85;
  --info-soft: #E2EBF3;

  /* Типографика */
  --font-ui: 'Manrope', system-ui, sans-serif;               /* интерфейс, таблицы; всегда tabular-nums */
  --font-num: 'Source Serif 4', Georgia, serif;              /* только крупные KPI и итоги */
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;    /* формулы, служебное */

  /* Отступы — шаг 4 px */
  --sp-half: 2px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;
  /* промежуточные шаги (плотные панели S3): 1 px — шов между ячейками, ½-шаги — 6/10/18/22 px */
  --sp-px: 1px; --sp-th: 3px; --sp-1h: 6px; --sp-2h: 10px; --sp-4h: 18px; --sp-5h: 22px;
  --sp-7: 28px;

  /* Радиусы */
  --r-checkbox: 4px;
  --r-badge: 6px;
  --r-control: 8px;         /* кнопка, поле */
  --r-card: 12px;           /* KPI, карточки, таблицы, поповеры */
  --r-tile: 10px;           /* плашки состояния и карточки ленты внутри боковой панели */
  --r-panel: 16px;          /* модалки */
  --r-pill: 999px;          /* чипы фильтров */
  --r-alert: 20px;          /* аларм нехватки денег */

  /* Высоты контролов */
  --accrual-indent: 120px;  /* раскрытый расчёт месяца: отступ слева под колонку «Ежемесячная» */
  --bar-h: 8px;             /* полоска начислений в карточке */
  --h-sm: 28px;             /* кнопки в строках, шаблоны */
  --h-chip: 30px;           /* чипы фильтров */
  --h-md: 36px;             /* поля в таблицах и панелях */
  --h-lg: 40px;             /* кнопки и степпер в шапке страницы, поля форм */
  --row-h: 44px;            /* строка таблицы (компактно — 36px) */

  /* Тени: по умолчанию плоско, только бордер */
  --shadow-1: 0 1px 2px rgba(37, 34, 29, 0.06);              /* наведение на карточку */
  --shadow-2: 0 6px 16px rgba(37, 34, 29, 0.08);             /* поповеры, липкая панель сохранения (вверх: 0 -6px 16px) */
  --shadow-3: -16px 0 40px rgba(37, 34, 29, 0.16);           /* боковая панель */
  --shadow-up: 0 -6px 16px rgba(37, 34, 29, 0.08);           /* липкая панель сохранения (над ней таблица) */
  --shadow-modal: 0 24px 56px -12px rgba(40, 30, 15, 0.35);  /* модалка подтверждения */
  --shadow-popover: 0 8px 24px -6px rgba(70, 52, 24, 0.16);   /* поповеры: дата, месяц, список (стайлгайд v0.1) */
  --focus-ring: 0 0 0 3px rgba(61, 115, 85, 0.30);
  --focus-ring-field: 0 0 0 3px rgba(61, 115, 85, 0.16);       /* фокус полей ввода (стайлгайд v0.1; у кнопок — --focus-ring) */

  /* Сетка */
  --nav-w: 248px;
  --nav-w-collapsed: 64px;  /* режим массового ввода */
  --nav-peek-delay: 200ms;     /* F-399: наведение на рейку → раскрытие поверх контента (nav.js читает) */
  --nav-peek-duration: 150ms;  /* появление тени раскрытой рейки; при prefers-reduced-motion — без анимации */
  --page-pad: 40px;         /* поля main: 40 40 48 */
  --page-gap: 24px;
  --panel-w: 640px;         /* карточка сотрудника; форма события — 760px */
  --panel-w-wide: 760px;    /* форма «Новое событие» */
  --hint-w: 280px;          /* поповер подсказки «i» */
  --hint-icon: 12px;        /* значок «i» */
  --hint-hit: 16px;         /* область нажатия значка «i» */
  --table-min-w: 880px;     /* минимальная ширина таблицы: уже — горизонтальная прокрутка */
  --team-table-min-w: 1100px; /* «Команда»: десять столбцов с подсказками «i»; уже — горизонтальная прокрутка */
  --refs-pos-table-min-w: 700px; /* «Справочники → Позиции»: шесть столбцов; помещаются в карточку 8/12 на 1440 px без полосы прокрутки (F-398) */
  --breakdown-w: 960px;     /* «Экономика» → «Разбор изменения пирога»: ширина блока, числа рядом с названием (F-510) */
  --edge-shadow: rgba(37, 34, 29, 0.16);     /* широкая таблица: тень у края, за которым есть ещё колонки */
  --edge-shadow-w: 16px;                       /* ширина этой тени */
  --shadow-pin: 8px 0 8px -8px rgba(37, 34, 29, 0.28); /* закреплённая первая колонка, когда таблица прокручена вбок */
  --hbar-h: 18px;                              /* полоса прокрутки, прилипшая к низу окна */
  --panel-in-dur: 0.3s;     /* появление боковой панели: проявление + сдвиг справа (F-368) */
  --toast-life: 8s;         /* сколько всплывающее уведомление «Сохранено» держится, затем гаснет (F-416) */
  --toast-w: 360px;         /* наибольшая ширина всплывающего уведомления */
  --toast-z: 33;            /* поверх таблиц, липких панелей и боковой панели (30), выше полосы и плашки ожидания (F-495), ниже поповеров (40) */
  --popover-z: 40;          /* поповеры (календарь выбора даты): поверх карточек и боковой панели (30) */
  --dialog-z: 50;           /* окно «уйти без сохранения?» (F-431): поверх боковой панели (30) и поповеров (40) */
  --wait-bar-h: 3px;        /* ожидание ответа (F-495): высота полосы вверху окна */
  --wait-bar-color: var(--green-600);  /* цвет полосы */
  --wait-bar-z: 31;         /* полоса: выше шапки-меню (18) и боковой панели (30), ниже плашки и уведомления */
  --wait-note-z: 32;        /* плашка «Загружаем…»: выше полосы, ниже уведомления (--toast-z) */
  --wait-bar-period: 1.4s;  /* один пробег неопределённой полосы */
  --wait-bar-seg: 40%;      /* длина бегущего отрезка; при prefers-reduced-motion — неподвижный отрезок такой длины */
  --wait-delay: 150ms;      /* полоса и местный признак появляются не раньше */
  --wait-min: 300ms;        /* показанная полоса держится не меньше */
  --wait-slow: 3s;          /* через сколько появляется плашка «Загружаем «…»…» */
  --wait-stuck: 15s;        /* через сколько плашка говорит «Дольше обычного» */
  --busy-opacity: .55;      /* приглушение нажатой ссылки и области, которую обновляет запрос */
  --panel-in-shift: 24px;   /* на сколько панель сдвинута вправо в начале появления */
  --hidden-door: 16px;      /* невидимая область входа в «Скрытые настройки» в правом нижнем углу окна (F-367) */
  --hell-night: rgba(14, 2, 2, 0.78);   /* пасхалка «666»: затемнение экрана */
  --hell-flame-1: #FFD34D;  /* пасхалка: сердцевина пламени */
  --hell-flame-2: #FF7A1A;  /* пасхалка: середина пламени */
  --hell-flame-3: #D8230F;  /* пасхалка: край пламени */
  --hell-flame-4: #5C0A05;  /* пасхалка: дым у края костра */
  --hell-line: #FF5A2A;     /* пасхалка: линия пентаграммы */
}