/* SynnFrameFW design tokens — Stage 1.A.1
 *
 * Single source of truth for colours, spacing, radius, shadows, typography.
 * Every UI wrapper (UiCard, UiBadge, UiTextField…) must consume these
 * variables — no hard-coded #RRGGBB or 12px values anywhere else.
 *
 * Source: WMS-UI-SPEC.md §3.
 */

:root {
  /* ── Brand ─────────────────────────────────────────────────────── */
  /* Источник правды — палитра темы Syncfusion Fluent 2 (`--color-sf-*`,
     объявлена в :root файла fluent2.css). Наши токены не задают свои цвета,
     а ссылаются на неё: тогда оболочка и компоненты — один визуальный язык,
     а тёмная тема работает сама, потому что fluent2-dark.css переопределяет
     те же переменные. Значение после запятой — фолбэк, если тема не загрузилась.
     Акцент ОДИН (был жёлтый + синий + зелёная шапка — глаз не понимал, что главное). */
  --brand-1:        var(--color-sf-primary, #0f6cbd);
  --brand-1-hover:  var(--color-sf-primary-bg-color-hover, #0f548c);
  --brand-2:        var(--color-sf-primary, #0f6cbd);
  --brand-2-hover:  var(--color-sf-primary-bg-color-hover, #0f548c);
  --brand-2-active: var(--color-sf-primary-dark, #0f548c);

  /* Legacy aliases — постепенный переход. */
  --brand-primary:        var(--brand-2);
  --brand-primary-hover:  var(--brand-2-hover);
  --brand-primary-active: var(--brand-2-active);

  /* ── Semantic ──────────────────────────────────────────────────── */
  --color-success:    var(--color-sf-success, #0e700e);
  --color-success-bg: var(--color-sf-success-light-alt, #f1faf1);
  --color-warning:    var(--color-sf-warning, #bc4b09);
  --color-warning-bg: var(--color-sf-warning-light-alt, #fff9f5);
  --color-danger:     var(--color-sf-danger, #d13438);
  --color-danger-bg:  var(--color-sf-danger-light-alt, #fdf3f4);
  --color-info:       var(--color-sf-info, #008aa9);
  --color-info-bg:    var(--color-sf-info-light-alt, #f2fafc);
  --color-neutral:    var(--color-sf-content-text-color-alt2, #616161);
  --color-neutral-bg: var(--color-sf-content-bg-color-alt2, #f5f5f5);

  /* ── Surfaces ──────────────────────────────────────────────────── */
  --surface-bg:       var(--color-sf-content-bg-color, #fafafa);
  --surface-card:     var(--color-sf-content-bg-color-alt1, #ffffff);
  --surface-elevated: var(--color-sf-content-bg-color-alt1, #ffffff);
  --surface-hover:    var(--color-sf-content-bg-color-hover, #f0f0f0);
  --surface-selected: var(--color-sf-primary-lighter, #ebf3fc);
  --surface-pressed:  var(--color-sf-content-bg-color-pressed, #e0e0e0);
  /* Подложка шапок таблиц, итогов, свёрнутых секций — чуть темнее карточки. */
  --surface-subtle:   var(--color-sf-content-bg-color-alt2, #f5f5f5);
  /* Затемнение под выезжающими панелями и окнами. */
  --overlay:          rgba(0, 0, 0, .2);
  /* «Инверсная» плашка (панель выделения): тёмная в светлой теме и наоборот. */
  --inverse-bg:         #242424;
  --inverse-text:       #ffffff;
  --inverse-text-muted: #c8c8c8;
  --accent-bar:       var(--color-sf-primary, #0f6cbd);

  /* ── Text ──────────────────────────────────────────────────────── */
  --text-primary:   var(--color-sf-content-text-color, #1A1A1A);
  --text-secondary: var(--color-sf-content-text-color-alt2, #595959);
  --text-disabled:  var(--color-sf-content-text-color-disabled, #BFBFBF);
  --text-on-brand:  var(--color-sf-primary-text-color, #FFFFFF);

  /* ── Borders ───────────────────────────────────────────────────── */
  --border-default: var(--color-sf-border, #E0E0E0);
  --border-strong:  var(--color-sf-border-dark, #BDBDBD);
  --border-subtle:  var(--color-sf-border-light, #ebebeb);
  --border-focus:   var(--brand-primary);
  /* Мягкий ореол вокруг поля в фокусе (поиск в шапке/списке). */
  --focus-halo:     rgba(15, 108, 189, .16);

  /* ── Spacing scale ─────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;

  /* ── Radius ────────────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-full: 9999px;

  /* ── Elevation ─────────────────────────────────────────────────── */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* ── Typography ────────────────────────────────────────────────── */
  /* Системный шрифт Fluent 2: Segoe UI на Windows, San Francisco на macOS,
     Roboto/Ubuntu на Android/Linux. Сторонний Inter не грузится — убран. */
  --font-family: 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system,
                 BlinkMacSystemFont, Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:   'Cascadia Mono', 'JetBrains Mono', Consolas, monospace;

  /* Шкала шрифтов Fluent 2 — ровно пять ступеней: 12 / 14 / 16 / 20 / 24.
     caption — подписи полей, бейджи, служебное; body — всё основное (поля,
     кнопки, таблицы, меню); subtitle — заголовки секций; title — заголовок
     формы/страницы; display — крупные числа плиток. */
  --fs-caption:  12px;
  --fs-body:     14px;
  --fs-subtitle: 16px;
  --fs-title:    20px;
  --fs-display:  24px;
  /* Прежние имена — алиасы на шкалу (13px вне шкалы → body 14). */
  --fs-xs:  var(--fs-caption);
  --fs-sm:  var(--fs-body);
  --fs-md:  var(--fs-body);
  --fs-lg:  var(--fs-subtitle);
  --fs-xl:  var(--fs-title);
  --fs-2xl: var(--fs-display);
  --fs-3xl: 32px;
  /* Единственное исключение из шкалы — крупное число плитки главной (KPI). */
  --fs-kpi: 28px;

  --fw-regular:  400;
  --fw-semibold: 600;

  --lh-tight:  1.25;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  /* ── Размеры элементов управления (плотность «Обычный») ────────────
     control — поле ввода и кнопка панели; row — строка списка (SfGrid);
     tp-row — строка табличной части в карточке. Плотный/Сенсорный —
     классы body.density-compact / body.density-touch ниже. */
  --control-h: 32px;
  --row-h:     40px;
  --tp-row-h:  32px;

  /* ── Motion ────────────────────────────────────────────────────── */
  --motion-fast:   120ms;
  --motion-normal: 200ms;
  --motion-slow:   320ms;
}

/* ── Dark theme ──────────────────────────────────────────────────────
 * Своих значений здесь НЕТ намеренно. theming.js подменяет тему Syncfusion
 * на fluent2-dark.css, а та переопределяет `--color-sf-*` в :root — токены
 * выше ссылаются на них и темнеют вместе с компонентами.
 * Раньше тут стоял хардкод (#1E1E1E и т.п.), который расходился с реальной
 * тёмной темой библиотеки и перебивал её из-за большей специфичности.
 * Тени в тёмной теме должны быть глубже: на тёмном фоне мягкие не читаются. */
:root[data-theme="dark"] {
  /* primary-dark темы в тёмном варианте светлее основного — для :active
     главной кнопки нужен более тёмный. */
  --brand-2-active:     #0f548c;
  --inverse-bg:         #f0f0f0;
  --inverse-text:       #1a1a1a;
  --inverse-text-muted: #505050;
  --overlay:            rgba(0, 0, 0, .5);
  --focus-halo:         rgba(71, 158, 245, .28);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .48);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, .56);
  --shadow-3: 0 8px 24px rgba(0, 0, 0, .64);
}

/* ── Плотность (переключатель в меню профиля, за пользователем) ──────
   Плотный — строка списка 32, поле 28, отступы уже;
   Обычный (по умолчанию) — строка 40, поле 32;
   Сенсорный — строка 48, поле 40: палец, планшет у кассы. */
body.density-compact {
  --control-h: 28px;
  --row-h:     32px;
  --tp-row-h:  28px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 18px;
}
body.density-touch {
  --control-h: 40px;
  --row-h:     48px;
  --tp-row-h:  44px;
}

/* ── Global resets that consume the tokens ───────────────────────── */
/* --ui-* переменные задаёт форма «Оформление интерфейса» (synnframefw.appearance.apply);
   при отсутствии — fallback на токены по умолчанию. */
html, body {
  background-color: var(--surface-bg);
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: var(--ui-body-fs, var(--fs-md));
  line-height: var(--lh-normal);
  transition: background-color var(--motion-normal), color var(--motion-normal);
}

/* Заголовки страниц (h1 — размер из настроек оформления) — css/layout.css. */