/* ============================================================
   IGM Theme Bridge - Token-мост на Fluent UI Blazor Design System
   ============================================================
   Дизайн-система (colors_and_type.css) и проект (main.css) используют
   РАЗНЫЕ имена токенов. Этот файл переопределяет ПРИМИТИВЫ проекта
   (--blue-sky-*, --gray-*, --green/red/apricot-*) и переменные AirFrame
   (--af-*) через токены дизайн-системы.

   Семантика проекта определена через примитивы, например:
     --color-background-brand-default: var(--blue-sky-600);
   Поэтому достаточно переопределить примитив - вся семантика и
   утилити-классы (.bg-blue-sky-*, .text-*, .border-*) перекрашиваются
   автоматически, БЕЗ правки разметки.

   ВАЖНО (специфичность): app.css объявляет переменные на html:root
   (0,1,1), что перебивает :root (0,1,0). Поэтому мост обязан тоже
   использовать html:root и подключаться ПОСЛЕ app.css.

   Тёмная тема: значения --accent-* / --neutral-* меняются под
   [data-theme="dark"] в colors_and_type.css, поэтому маппинги ниже
   через var(...) автоматически дают тёмные значения - отдельный
   dark-блок здесь не нужен.
   ============================================================ */

html:root {
  /* ---------- Шрифт (Onest - вторым; основной "Segoe UI Variable") ---------- */
  --body-font: "Segoe UI", "Onest", "Segoe UI Variable", -apple-system,
               BlinkMacSystemFont, "Helvetica Neue", "Arial", sans-serif;

  /* ========================================================
     БРЕНД: --blue-sky-* -> accent (shield blue #386ba5)
     Проект: 100 светлый ... 900 тёмный, 600 = базовый бренд.
     ДС-акцент даёт базовый + hover/active (темнее) + 1 светлый тинт.
     ======================================================== */
  --blue-sky-100: var(--accent-stroke-control-active);  /* #d0deed светлый тинт */
  --blue-sky-150: var(--accent-stroke-control-active);
  --blue-sky-200: var(--accent-stroke-control-active);
  --blue-sky-300: var(--accent-stroke-control-active);
  --blue-sky-400: var(--accent-fill-rest);              /* #386ba5 база */
  --blue-sky-500: var(--accent-fill-rest);
  --blue-sky-600: var(--accent-fill-rest);              /* основной бренд */
  --blue-sky-700: var(--accent-fill-hover);             /* #2f5b8e */
  --blue-sky-800: var(--accent-fill-active);            /* #245074 */
  --blue-sky-900: var(--accent-fill-active);

  /* ========================================================
     НЕЙТРАЛИ: --gray-* -> neutral layers/strokes/foregrounds
     Тёмные оттенки 600-900 (текст) оставлены как есть - они уже
     brand-neutral и близки к Fluent; их флип делает main.css
     [data-theme=dark] через семантические токены.
     ======================================================== */
  --gray-100: var(--neutral-layer-3);          /* #f5f5f5 */
  --gray-200: var(--neutral-layer-4);          /* #f0f0f0 */
  --gray-250: var(--neutral-stroke-rest);      /* #d1d1d1 границы */
  --gray-300: var(--neutral-stroke-active);    /* #b3b3b3 */
  --gray-400: var(--neutral-stroke-strong-rest);/* #707070 */
  --gray-500: var(--neutral-foreground-hint);  /* #616161 */

  /* ========================================================
     СТАТУСЫ -> Fluent semantic (светлые -> *-bg, насыщенные -> solid)
     Перекрашивает --color-*-positive/danger/warning-* и
     утилити .bg-green-* / .text-red-* и т.п.
     ======================================================== */
  /* Positive / success */
  --green-50:  var(--status-success-bg);
  --green-100: var(--status-success-bg);
  --green-200: var(--status-success-bg);
  --green-300: var(--success);
  --green-400: var(--success);
  --green-500: var(--success);
  --green-600: var(--success);
  --green-700: var(--success);
  --green-800: var(--success);
  --green-900: var(--success);
  /* Danger / error */
  --red-50:  var(--status-error-bg);
  --red-100: var(--status-error-bg);
  --red-200: var(--status-error-bg);
  --red-300: var(--error);
  --red-400: var(--error);
  --red-500: var(--error);
  --red-600: var(--error);
  --red-700: var(--error);
  --red-800: var(--error);
  --red-900: var(--error);
  /* Warning */
  --apricot-50:  var(--status-warning-bg);
  --apricot-100: var(--status-warning-bg);
  --apricot-200: var(--status-warning-bg);
  --apricot-300: var(--warning);
  --apricot-400: var(--warning);
  --apricot-500: var(--warning);
  --apricot-600: var(--warning);
  --apricot-700: var(--warning);
  --apricot-800: var(--warning);
  --apricot-900: var(--warning);

  /* ========================================================
     AirFrame (--af-*, --popover-*) - значения из app.css были
     хардкод-hex; перенаправляем на токены ДС.
     ======================================================== */
  --af-primary:      var(--accent-fill-rest);
  --af-primary-hov:  var(--accent-fill-hover);
  --af-accent:       var(--accent-fill-rest);
  --af-nav-active:   var(--accent-fill-rest);
  --af-label:        var(--accent-foreground-rest);
  --af-text:         var(--neutral-foreground-rest);
  --af-text-muted:   var(--neutral-foreground-hint);
  --af-border:       var(--neutral-stroke-divider-rest);
  --af-border-subtle:var(--neutral-stroke-divider-rest);
  --af-border-grid:  var(--neutral-stroke-divider-rest);
  --af-border-row:   var(--neutral-stroke-divider-rest);
  --af-surface:        var(--neutral-layer-1);
  --af-surface-subtle: var(--neutral-layer-2);
  --af-surface-muted:  var(--neutral-layer-3);
  --af-bg-toolbar:   var(--neutral-layer-4);
  --af-bg-nav:       var(--neutral-layer-4);
  --popover-secondary-menu-icon-color: var(--accent-fill-rest);
}

/* Применяем брендовый шрифт к тексту (var выше задаёт только значение) */
body {
  font-family: var(--body-font);
}