/* ============================================================================
 * Genesis — единые дизайн-токены семейства (Suite-CDN, раскатка на все продукты).
 * Подключение в любом продукте (как suite-switcher.js):
 *   <link rel="stylesheet" href="https://suite.netchess.ru/suite-theme.css">
 * Зеркалит словарь токенов G-Tools (`shared/themes/m365/m365.css`): нейтральная
 * палитра + НАШ брендовый indigo #4f46e5. Источник правды по бренду — Genesis Suite
 * (process owner). Продукты мапят свои компоненты на эти переменные (--ge-color-*),
 * HTML-разметку не навязываем. Тёмную тему добавим как [data-theme="dark"] позже.
 *
 * Иконки/фавикон (family-стандарт, см. docs/BRAND-KIT.md): скруглённая плитка
 * indigo-градиента + белый глиф (буква продукта). Радиус — var(--ge-radius-lg).
 * ========================================================================== */
:root {
  /* Бренд */
  --ge-color-brand:         #4f46e5;   /* indigo — бренд Genesis */
  --ge-color-brand-hover:   #4338ca;
  --ge-color-brand-soft:    #eef0fb;   /* фон активного пункта/выделения */
  --ge-color-brand-2:       #7c6cf0;   /* доп. для градиентов плиток/иконок */

  /* Текст */
  --ge-color-text:          #201f1e;
  --ge-color-text-mute:     #605e5c;
  --ge-color-text-faint:    #8a8886;

  /* Поверхности */
  --ge-color-bg:            #faf9f8;   /* холст */
  --ge-color-surface:       #ffffff;   /* карточка */
  --ge-color-border:        #edebe9;
  --ge-color-border-strong: #d2d0ce;
  --ge-color-hover:         #f3f2f1;

  /* Семантика */
  --ge-color-accent-blue:   #0078d4;
  --ge-color-ok:            #15803d;
  --ge-color-warn:          #b45309;
  --ge-color-err:           #b91c1c;

  /* Типографика */
  --ge-font-family: 'Segoe UI', system-ui, -apple-system, 'SF Pro Text', sans-serif;
  --ge-font-mono:   'Cascadia Mono', 'SF Mono', Consolas, monospace;
  --ge-font-size-xs: 11px;
  --ge-font-size-sm: 12.5px;
  --ge-font-size-md: 13.5px;
  --ge-font-size-lg: 16px;
  --ge-font-size-h2: 21px;
  --ge-font-size-h1: 28px;
  --ge-line-height:  1.43;

  /* Форма / отступы / тени */
  --ge-radius-sm: 3px;
  --ge-radius-md: 4px;
  --ge-radius-lg: 8px;
  --ge-radius-pill: 999px;
  --ge-space-1: 4px;
  --ge-space-2: 8px;
  --ge-space-3: 12px;
  --ge-space-4: 16px;
  --ge-space-5: 24px;
  --ge-shadow-card:   0 1.6px 3.6px rgba(0,0,0,.13), 0 .3px .9px rgba(0,0,0,.11);
  --ge-shadow-drawer: -8px 0 28px rgba(0,0,0,.16);
  --ge-shadow-pop:    0 8px 28px rgba(0,0,0,.18);

  /* Каркас (для общих shell-паттернов G-Tools) */
  --ge-header-h:    48px;
  --ge-shell-side-w:260px;
  --ge-drawer-w:    440px;

  /* Градиент бренда (иконки/плитки/акценты) */
  --ge-brand-gradient: linear-gradient(135deg, var(--ge-color-brand), var(--ge-color-brand-2));
}

/* Базовые семейные хелперы (опционально; продукт может игнорировать) */
.ge-brand-mark {
  display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: var(--ge-radius-lg); color: #fff; font-weight: 800;
  background: var(--ge-brand-gradient);
}
.ge-btn-brand {
  background: var(--ge-color-brand); color: #fff; border: none;
  border-radius: var(--ge-radius-md); padding: var(--ge-space-2) var(--ge-space-4);
  font: 600 var(--ge-font-size-md)/1 var(--ge-font-family); cursor: pointer;
}
.ge-btn-brand:hover { background: var(--ge-color-brand-hover); }
.ge-badge { border-radius: var(--ge-radius-pill); padding: 2px 10px; font-size: var(--ge-font-size-xs); }