:root {
  /* SparkGuardian color tokens */
  --sg-color-accent: #ffdb00;
  --sg-color-bg: #f6f7f8;
  --sg-color-text: #383839;
  --sg-color-subtitle: #313132;
  --sg-color-form-bg: #e8edf1;
  --sg-color-placeholder: #6b6d6f;

  /* Поля ввода: .sg-tui-textfield на tui-textfield, .sg-native-input на нативных input */
  --sg-color-textfield-bg: #f3f4f7;
  --sg-color-textfield-hover-bg: #eaeff3;
  --sg-color-textfield-focus-bg: #ffffff;
  --sg-color-textfield-focus-border: #333333;
  --sg-color-textfield-focus-label: #333333;
  --sg-textfield-radius: var(--tui-radius-l);
  --sg-native-input-min-height: 2rem;
  --sg-native-input-padding: 0.35rem 0.5rem;
  /* Основные кнопки (например «Создать»): минимальная ширина без !important */
  --sg-primary-action-min-inline-size: 11rem;

  /* Semantic aliases */
  --sg-color-card-bg: #ffffff;
  --sg-color-border: color-mix(in srgb, var(--sg-color-text) 12%, transparent);
  --sg-color-danger: #d92d20;

  /* Ширина и отступы основного контента (шапка, страницы с классом .page) */
  /* От 1000px: боковые поля по умолчанию; уже 999px — 48px (media ниже). */
  --sg-content-max-width: 1104px;
  --sg-page-padding-inline: 1rem;

  /*
   * Чипы-категории (фильтры телеметрии, пресеты диапазона, вкладки потоков на просмотре).
   * Совпадают с полями там, где цвета те же: фон неактивного = --sg-color-textfield-bg.
   */
  --sg-filter-chip-bg: #f3f4f7;
  --sg-filter-chip-bg-hover: #eaeff3;
  --sg-filter-chip-fg: #313131;
  --sg-filter-chip-active-bg: #158eff;
  --sg-filter-chip-active-bg-hover: #0070ff;
  --sg-filter-chip-active-fg: #ffffff;

  /* Taiga accent palette override (primary-кнопки и т.п.; активная страница пагинации переопределена в sessions-list) */
  --tui-background-accent-1: var(--sg-color-accent);
  --tui-background-accent-1-hover: color-mix(in srgb, var(--sg-color-accent) 92%, black);
  --tui-background-accent-1-pressed: color-mix(in srgb, var(--sg-color-accent) 84%, black);
  --tui-text-primary-on-accent-1: var(--sg-color-text);

  --tui-background-base: var(--sg-color-bg);
  --tui-background-elevation-1: var(--sg-color-card-bg);
  --tui-text-primary: var(--sg-color-text);
  --tui-text-tertiary: color-mix(in srgb, var(--sg-color-text) 70%, white);
  --tui-text-action: color-mix(in srgb, var(--sg-color-text) 80%, black);
  --tui-border-normal: var(--sg-color-border);
  --tui-focus: var(--sg-color-accent);
  --tui-status-negative: var(--sg-color-danger);

  /* Чипы статусов сессии (кроме «Завершена» — без отдельной раскраски) */
  --sg-session-status-active-bg: color-mix(in srgb, #16a34a 18%, var(--sg-color-card-bg));
  --sg-session-status-active-fg: #166534;
  --sg-session-status-active-border: color-mix(in srgb, #16a34a 38%, transparent);

  --sg-session-status-pending-bg: color-mix(in srgb, #eab308 18%, var(--sg-color-card-bg));
  --sg-session-status-pending-fg: #713f12;
  --sg-session-status-pending-border: color-mix(in srgb, #eab308 34%, transparent);

  --sg-session-status-unknown-bg: color-mix(in srgb, var(--sg-color-text) 10%, var(--sg-color-card-bg));
  --sg-session-status-unknown-fg: var(--sg-color-text);
  --sg-session-status-unknown-border: var(--sg-color-border);

  /* Клавиатура (SVG + HTML-компонент) */
  --sg-keyboard-body: color-mix(in srgb, var(--sg-color-form-bg) 80%, var(--sg-color-border));
  --sg-keyboard-font-family: 'Tinkoff Sans', system-ui, sans-serif;
  --sg-keyboard-font-weight: 400;
  --sg-keyboard-letter-spacing: 0.03em;
  /* Не нажатые клавиши — светлый «фоновый» тон (как подложка интерфейса) */
  --sg-keyboard-key-surface-idle: color-mix(
    in srgb,
    var(--sg-color-form-bg) 78%,
    var(--sg-color-border)
  );
  --sg-keyboard-key-main: var(--sg-keyboard-key-surface-idle);
  --sg-keyboard-key-mod: var(--sg-keyboard-key-surface-idle);
  --sg-keyboard-key-other: var(--sg-keyboard-key-surface-idle);
  --sg-keyboard-key-stroke: color-mix(in srgb, var(--sg-color-border) 65%, transparent);
  /* Базовые глифы — ink-soft; контрастный «чёрный» — --sg-keyboard-ink (см. подсветку нажатий) */
  --sg-keyboard-ink: var(--sg-color-text);
  --sg-keyboard-ink-soft: var(--tui-text-tertiary);
  /* Нажатие: контрастный жёлтый акцент, символы на жёлтом — тёмные */
  --sg-keyboard-key-pressed-fill: var(--sg-color-accent);
  --sg-keyboard-key-pressed-ink: var(--sg-color-text);
  --sg-keyboard-highlight: var(--sg-keyboard-key-pressed-fill);
  /* Анимация подсветки ввода (клавиатура/мышь): централизованные параметры */
  --sg-input-highlight-duration: 140ms;
  --sg-input-highlight-easing: cubic-bezier(0.33, 1, 0.68, 1);
  --sg-input-highlight-from-scale: 0.94;
}

@media (max-width: 999px) {
  :root {
    --sg-page-padding-inline: 48px;
  }
}
