/* FinKontur — токены дизайн-системы. ЕДИНСТВЕННЫЙ источник цветов, размеров,
   отступов, радиусов и таймингов. Описание и правила — docs/design/01-ДИЗАЙН-СИСТЕМА.md.

   Три слоя: примитивы (--c-*, --space-*, --fs-*) -> семантика (--brand, --surface,
   --text-muted, --pos) -> компоненты (--btn-*, --card-*, --table-*).
   Тема переопределяет ТОЛЬКО семантический слой; компоненты про тему не знают.

   Подключается ПЕРВЫМ, до app.css:
       <link rel="stylesheet" href="/static/tokens.css">
       <link rel="stylesheet" href="/static/app.css">
   В конце файла — совместимость со старыми именами (--panel, --ink, --fact, ...),
   чтобы существующие стили работали без правок до перехода на новые имена. */

/* ------------------------------------------------------------------ */
/* 1. ПРИМИТИВЫ — палитра. Не использовать напрямую в компонентах.     */
/* ------------------------------------------------------------------ */
:root {
  --c-white: #ffffff;
  --c-slate-50:  #f6f7f9;
  --c-slate-100: #eceef2;
  --c-slate-200: #dde1e8;
  --c-slate-300: #c3c9d4;
  --c-slate-400: #99a1b0;
  --c-slate-500: #6b7484;
  --c-slate-600: #4c5462;
  --c-slate-700: #343b49;
  --c-slate-800: #212734;
  --c-slate-900: #151a24;
  --c-slate-950: #0d111a;

  --c-blue-100: #dbe5ff;
  --c-blue-300: #8fadff;
  --c-blue-500: #3a63e8;
  --c-blue-600: #2a4cc7;
  --c-blue-700: #1f3a9b;

  --c-violet-100: #e7defb;
  --c-violet-300: #b39bff;
  --c-violet-500: #8663e0;
  --c-violet-600: #6d4ac9;
  --c-violet-700: #54389e;

  --c-green-100: #dcf5e7;
  --c-green-300: #4ade9b;
  --c-green-500: #12a05f;
  --c-green-600: #0e7c4a;
  --c-green-700: #0a5c37;

  --c-red-100: #fde4e4;
  --c-red-300: #f98a8a;
  --c-red-500: #dc2b2b;
  --c-red-600: #b42222;
  --c-red-700: #8c1a1a;

  --c-amber-100: #fdf0d5;
  --c-amber-300: #f5c451;
  --c-amber-500: #c08000;
  --c-amber-600: #9a6500;
  --c-amber-700: #7a5000;

  /* Отступы — плотная шкала, шаг 4 (плотность 8/10). */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Типографика */
  --font-sans: "IBM Plex Sans", "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
  /* Числа — Golos Text с включённым `tabular-nums`: цифры одной ширины (проверено
     замером: без него 1111111111 = 194px, 0000000000 = 248px, с ним обе 248px),
     поэтому разряды стоят в колонку без моноширинного «печатного» вида. */
  --font-num: "Golos Text", "IBM Plex Sans", "Segoe UI", sans-serif;
  /* Моноширинный — только техническое: идентификаторы, ключи, куски кода в помощи.
     Деньги им НЕ набираются. Системный стек, webfont ради этого не грузим. */
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;

  --fs-caption: 12px;  --lh-caption: 16px;
  --fs-small:   13px;  --lh-small:   18px;
  --fs-body:    15px;  --lh-body:    22px;
  /* Поля ввода. На сенсорных экранах — 16px: Safari на iPhone приближает страницу
     при фокусе в поле с кеглем меньше 16px, и вернуть масштаб потом непросто. */
  --fs-control: 15px;
  --fs-lead:    17px;  --lh-lead:    26px;
  --fs-h3:      18px;  --lh-h3:      24px;
  --fs-h2:      22px;  --lh-h2:      28px;
  --fs-h1:      28px;  --lh-h1:      34px;
  /* KPI-числа тянутся по ширине плитки: длинная сумма не переносится на две строки
     на узкой колонке (правило «страница не прокручивается по горизонтали»). */
  --fs-kpi:     clamp(22px, 2.2vw, 34px);  --lh-kpi:     1.15;
  --fs-kpi-lg:  clamp(28px, 3vw, 44px);    --lh-kpi-lg:  1.1;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-light: 300;

  /* Размеры, радиусы, границы */
  --control-h: 36px;
  --control-h-sm: 28px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  /* Полностью скруглённая «таблетка» — пилюли/бейджи (T94, миграция app.css с px). */
  --radius-full: 999px;
  --border-w: 1px;
  --sidebar-w: 240px;
  --sidebar-w-md: 56px;
  --header-h: 56px;
  --content-max: 1440px;
  --measure: 68ch;

  /* Движение — 3/10: подтверждает действие, ничего не украшает. */
  --dur-fast: 160ms;
  --dur-base: 200ms;
  --dur-enter: 220ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);

  --z-header: 100;
  --z-sticky: 200;
  --z-overlay: 900;
  --z-modal: 1000;
  --z-toast: 1100;
}

/* ------------------------------------------------------------------ */
/* 2. СЕМАНТИКА — светлая тема (по умолчанию).                         */
/*    Только этот слой переопределяется темой.                         */
/* ------------------------------------------------------------------ */
:root {
  --bg: var(--c-slate-50);
  --surface: var(--c-white);
  --surface-2: var(--c-slate-100);
  --surface-raised: var(--c-white);

  --border: var(--c-slate-200);
  --border-strong: var(--c-slate-300);

  --text: var(--c-slate-950);
  --text-muted: var(--c-slate-500);
  --text-faint: var(--c-slate-400);
  --text-inverse: var(--c-white);

  --brand: var(--c-blue-600);
  --brand-hover: var(--c-blue-700);
  --brand-weak: var(--c-blue-100);
  --on-brand: var(--c-white);

  --model: var(--c-violet-600);
  --model-weak: var(--c-violet-100);

  --pos: var(--c-green-600);
  --pos-bg: var(--c-green-100);
  --neg: var(--c-red-600);
  --neg-bg: var(--c-red-100);
  --warn: var(--c-amber-600);
  --warn-bg: var(--c-amber-100);
  --na: var(--c-slate-500);

  --focus: var(--c-blue-500);
  --overlay: rgba(13, 17, 26, .45);

  --shadow-1: 0 1px 2px rgba(13, 17, 26, .06);
  --shadow-2: 0 8px 24px rgba(13, 17, 26, .12);

  /* Ряды графиков: цвет + стиль линии (цвет не единственный носитель смысла). */
  --series-fact: var(--brand);
  --series-model: var(--model);
  --series-gap: rgba(42, 76, 199, .10);
  --series-cash: var(--c-green-500);
  --series-accrual: var(--c-amber-500);
  --series-prev: var(--text-faint);
  /* T130a (§2.4, дописано): роли существующих семантических цветов для столбцов 02 —
     тема переопределяет --text-muted/--pos/--neg, эти три идут следом сами. */
  --series-neutral: var(--text-muted);
  --series-pos: var(--pos);
  --series-neg: var(--neg);

  color-scheme: light;
}

/* Тёмная тема: системная (если пользователь не выбрал светлую руками) ... */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--c-slate-950);
    --surface: var(--c-slate-900);
    --surface-2: var(--c-slate-800);
    --surface-raised: var(--c-slate-800);

    --border: #262b34;
    --border-strong: var(--c-slate-700);

    --text: #e9ecf2;
    --text-muted: var(--c-slate-400);
    --text-faint: var(--c-slate-500);
    --text-inverse: var(--c-slate-950);

    --brand: #7ca0ff;
    --brand-hover: var(--c-blue-300);
    --brand-weak: rgba(124, 160, 255, .14);
    --on-brand: var(--c-slate-950);

    --model: var(--c-violet-300);
    --model-weak: rgba(179, 155, 255, .16);

    --pos: var(--c-green-300);
    --pos-bg: rgba(74, 222, 155, .16);
    --neg: var(--c-red-300);
    --neg-bg: rgba(249, 138, 138, .16);
    --warn: var(--c-amber-300);
    --warn-bg: rgba(245, 196, 81, .16);
    --na: var(--c-slate-400);

    --focus: var(--c-blue-300);
    --overlay: rgba(0, 0, 0, .6);

    /* На тёмном фоне тень не читается — глубину задаёт светлота поверхности. */
    --shadow-1: none;
    --shadow-2: 0 8px 24px rgba(0, 0, 0, .5);

    --series-gap: rgba(124, 160, 255, .14);

    color-scheme: dark;
  }
}

/* ... и выбранная руками (переключатель темы, app.js). */
:root[data-theme="dark"] {
  --bg: var(--c-slate-950);
  --surface: var(--c-slate-900);
  --surface-2: var(--c-slate-800);
  --surface-raised: var(--c-slate-800);

  --border: #262b34;
  --border-strong: var(--c-slate-700);

  --text: #e9ecf2;
  --text-muted: var(--c-slate-400);
  --text-faint: var(--c-slate-500);
  --text-inverse: var(--c-slate-950);

  --brand: #7ca0ff;
  --brand-hover: var(--c-blue-300);
  --brand-weak: rgba(124, 160, 255, .14);
  --on-brand: var(--c-slate-950);

  --model: var(--c-violet-300);
  --model-weak: rgba(179, 155, 255, .16);

  --pos: var(--c-green-300);
  --pos-bg: rgba(74, 222, 155, .16);
  --neg: var(--c-red-300);
  --neg-bg: rgba(249, 138, 138, .16);
  --warn: var(--c-amber-300);
  --warn-bg: rgba(245, 196, 81, .16);
  --na: var(--c-slate-400);

  --focus: var(--c-blue-300);
  --overlay: rgba(0, 0, 0, .6);
  --shadow-1: none;
  --shadow-2: 0 8px 24px rgba(0, 0, 0, .5);
  --series-gap: rgba(124, 160, 255, .14);

  color-scheme: dark;
}

/* ------------------------------------------------------------------ */
/* 3. КОМПОНЕНТНЫЕ ТОКЕНЫ — то, чем пользуется конкретный компонент.   */
/*    Ссылаются только на семантику, никогда на примитивы напрямую.    */
/* ------------------------------------------------------------------ */
:root {
  /* Кнопка */
  --btn-h: var(--control-h);
  --btn-radius: var(--radius-md);
  --btn-padding-x: var(--space-4);
  --btn-font-size: var(--fs-small);
  --btn-font-weight: var(--fw-medium);
  --btn-primary-bg: var(--brand);
  --btn-primary-bg-hover: var(--brand-hover);
  --btn-primary-text: var(--on-brand);
  --btn-secondary-bg: var(--surface);
  --btn-secondary-border: var(--border-strong);
  --btn-secondary-text: var(--text);
  --btn-ghost-text: var(--text-muted);
  --btn-danger-bg: var(--neg);
  --btn-danger-text: var(--c-white);

  /* Поле ввода */
  --field-h: var(--control-h);
  --field-radius: var(--radius-sm);
  --field-bg: var(--surface);
  --field-border: var(--border-strong);
  --field-border-focus: var(--focus);
  --field-border-error: var(--neg);
  --field-placeholder: var(--text-faint);
  --field-label-size: var(--fs-caption);

  /* Карточка и панель */
  --card-bg: var(--surface);
  --card-border: var(--border);
  --card-radius: var(--radius-md);
  --card-padding: var(--space-4);
  --card-shadow: var(--shadow-1);
  --card-gap: var(--space-5);

  /* Таблица */
  --table-head-bg: var(--surface-2);
  --table-head-size: var(--fs-caption);
  --table-row-hover: var(--surface-2);
  --table-row-selected: var(--brand-weak);
  --table-border: var(--border);
  --table-border-total: var(--border-strong);
  --table-cell-py: var(--space-2);
  --table-cell-px: var(--space-3);
  --table-num-font: var(--font-num);

  /* KPI-плитка */
  --kpi-label-color: var(--text-muted);
  --kpi-value-size: var(--fs-kpi);
  /* 400, а не 300: у Golos Text нет светлого начертания, а подмешивать сюда
     другую гарнитуру ради тонких цифр — ровно то расхождение, ради которого
     заведена система. */
  --kpi-value-weight: var(--fw-regular);
  --kpi-lens-color: var(--text-faint);

  /* Плашка статуса */
  --chip-radius: var(--radius-sm);
  --chip-padding: 2px var(--space-2);
  --chip-font-size: var(--fs-caption);

  /* Навигация */
  --nav-item-h: 34px;
  --nav-item-radius: var(--radius-sm);
  --nav-item-color: var(--text-muted);
  --nav-item-color-active: var(--brand);
  --nav-item-bg-active: var(--brand-weak);
  --nav-group-gap: var(--space-4);
  /* Нижняя панель XS/SM (T94, §8 адаптива) — высота бара, чтобы содержимое
     страницы и липкая панель действий форм знали, сколько снизу освободить. */
  --bottom-nav-h: 60px;

  /* Наложения */
  --modal-radius: var(--radius-lg);
  --modal-shadow: var(--shadow-2);
  --toast-radius: var(--radius-md);

  /* Графики и навигация (T130a, 01-ДИЗАЙН-СИСТЕМА.md §6.12–§6.18). Только семантика
     и размеры: тема сюда не заходит, тёмная версия получается сама. */
  --chart-h: 168px;
  --chart-h-lg: 300px;
  --chart-h-modal: clamp(220px, 46vh, 520px);
  --chart-grid: var(--border);
  --chart-axis-text: var(--text-muted);
  --chart-zero: var(--border-strong);
  --chart-cursor: var(--text-muted);
  --chart-tip-bg: var(--surface-raised);
  --chart-tip-border: var(--border);
  --chart-tip-shadow: var(--shadow-2);
  --chart-skeleton: var(--surface-2);
  --slider-track-h: 4px;
  --slider-handle: 16px;
  --slider-hit: 44px;
  --slider-mini-h: 44px;
  --slider-fill: var(--brand);
  --slider-band: var(--brand-weak);
  --overlay-blur: 4px;
  --modal-gap: var(--space-6);
  --slot-gap: var(--space-3);
  --balance-pos: var(--pos);
  --balance-neg: var(--neg);
  --balance-bar-h: var(--space-2);
  --sparkline-h: 40px;
  --sparkline-stroke: var(--series-fact);
  /* T130b — таблица-список без пагинации и её спутники (§6.19-6.27
     01-ДИЗАЙН-СИСТЕМА.md): прилипающий итог, панель фильтров, сортировка в
     несколько уровней, окно «Поля», строка-группа операции, «Куда ушло»,
     метка источника, подпись исполнителя. Ширины панелей — не фиксированный
     px (правило 2 §8 02-САЙТ-И-ЭКРАНЫ.md), а верхняя граница через min()/clamp()
     в самих компонентах; здесь только цвет/отступ/радиус компонентов. */
  --dt-total-bg: var(--surface);
  --dt-total-border: var(--border-strong);
  --dt-group-head-bg: var(--surface-2);
  --dt-group-detail-indent: var(--space-5);
  --dt-skeleton-bg: var(--surface-2);
  --filter-panel-bg: var(--surface);
  --filter-panel-border: var(--border);
  --filter-section-gap: var(--space-4);
  --columns-menu-bg: var(--surface);
  --sort-chip-bg: var(--brand-weak);
  --sort-chip-color: var(--brand);
  --impact-tile-bg: var(--surface-2);
  --impact-tile-radius: var(--radius-md);
  --source-badge-color: var(--text-muted);
  --signature-color: var(--text-muted);
}

/* Сенсорный ввод: тап-цель не меньше 44px (WCAG 2.2 / правила системы §4.3). */
@media (pointer: coarse) {
  :root {
    --fs-control: 16px;
    --control-h: 44px;
    --control-h-sm: 40px;
    --nav-item-h: 44px;
    --slider-handle: 20px;
  }
}

/* ------------------------------------------------------------------ */
/* 4. БАЗОВЫЕ ПРАВИЛА, вытекающие прямо из токенов.                    */
/* ------------------------------------------------------------------ */
:where(html) {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* Любое денежное значение — Golos Text с табличными цифрами, чтобы разряды
   выстраивались в колонку (бренд-бук §5). */
.num,
.money,
td.num,
th.num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.amount-pos { color: var(--pos); }
.amount-neg { color: var(--neg); }
.amount-na  { color: var(--na); font-family: var(--font-sans); font-variant-numeric: normal; }

/* Кольцо фокуса — единое на весь продукт, снимать нельзя (система §5). */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------------ */
/* 5. СОВМЕСТИМОСТЬ со старыми именами (app.css, dashboard.css,        */
/*    dashboard/template.html). Удалить после перехода на новые имена  */
/*    — см. docs/design/02-САЙТ-И-ЭКРАНЫ.md §10 «Долг интерфейса».     */
/* ------------------------------------------------------------------ */
:root {
  --panel: var(--surface);
  --ink: var(--text);
  --muted: var(--text-muted);
  --line: var(--border);
  --fact: var(--series-fact);
  --bench: var(--text-faint);
  --gap: var(--series-gap);
  --good: var(--pos);
  --bad: var(--neg);
  --accent: var(--model);
}