/* ================================================================
   Comparator — токены интерфейса в стиле «СоюзКомплект»
   Подключать ПЕРЕД styles.css. Светлая тема по умолчанию,
   тёмная — [data-theme="dark"] (опционально).
   Все пары текст/фон проверены: см. раздел 3 отчёта (WCAG AA+).
   ================================================================ */
:root {
  color-scheme: light;

  /* ── Бренд (из D:\portfolio-sk\assets\css\base.css) ── */
  --brand-blue:      #073070;
  --brand-red:       #e91e22;   /* только графика/акцент, не текст и не ошибки */
  --brand-red-strong:#c81318;   /* красный под белый текст: 5.9:1 (на #e91e22 — 4.49) */
  --brand-gray:      #e6e7e8;
  --brand-dark-blue: #2d4c5e;
  --brand-cyan:      #0084a0;
  --brand-teal:      #51766e;
  --brand-green:     #7d8e74;
  --brand-gold:      #caba93;

  /* ── Основные ── */
  --color-primary:          #073070;
  --color-primary-hover:    #05265a;
  --color-primary-active:   #041c42;
  --color-primary-tint:     #e8eef8;   /* фон выбранного, hover строк */
  --color-secondary:        #2d4c5e;
  --color-accent:           #e91e22;   /* тонкие акценты: маркер меню, полоса логотипа */
  --color-on-primary:       #ffffff;
  --on-brand-red:           #ffffff;   /* на --brand-red-strong, в обеих темах */
  --on-solid:               #ffffff;   /* текст на сплошных success/error/warning/info-заливках */
  --overlay:                rgba(5, 31, 77, 0.55);

  /* ── Фоны ── */
  --bg-page:      #f4f5f7;
  --bg-surface:   #ffffff;
  --bg-elevated:  #ffffff;             /* + --shadow-lg */
  --bg-sunken:    #f1f3f6;             /* код, JSON, вложенные блоки */
  --bg-sidebar:   #051f4d;
  --table-head-bg:#e6e7e8;

  /* ── Текст ── */
  --text-primary:   #14202e;
  --text-secondary: #44566a;
  --text-muted:     #546475;           /* мелкие подписи: ≥4.9:1 на всех светлых фонах (AA) */
  --text-disabled:  #8a96a3;
  --text-inverse:   #ffffff;
  --text-link:      #073070;
  --text-on-sidebar:       #e6e7e8;
  --text-on-sidebar-muted: #a9b8cf;
  --text-on-sidebar-disabled: #8d9fbd;
  --sidebar-active-bg: #0c3a85;
  --sidebar-hover-bg:  #0f2d66;
  --sidebar-divider:   #1d3a72;
  --sidebar-badge-bg:  #1d3a72;
  --sidebar-focus-ring:#5fc4dc;   /* 7.9:1 на --bg-sidebar */

  /* ── Границы ── */
  --border:         #c3cad3;           /* карточки, разделители между блоками */
  --border-control: #7b8896;           /* поля ввода, чекбоксы: ≥3:1 (WCAG 1.4.11) */
  --divider:        #e1e4e9;

  /* ── Интерактив ── */
  --hover-bg:     #eef1f6;
  --active-bg:    #e0e6f0;
  --focus-ring:   #007089;             /* 5.7:1 на белом */
  --focus-halo:   0 0 0 2px #ffffff, 0 0 0 4px var(--focus-ring);
  --disabled-bg:  #e9ecf0;
  --disabled-fg:  #566677;             /* НЕ opacity: ≥4.9:1 на --disabled-bg */

  /* ── Семантика (цвет + иконка + текст, не только цвет) ── */
  --success:       #2e7d4f;  --success-bg: #e6f4ea;  --success-fg: #1e6b3a;
  --warning:       #b7791f;  --warning-bg: #fff4d6;  --warning-fg: #7a4b00;
  --error:         #b3261e;  --error-bg:   #fdeaea;  --error-fg:   #a4141a;
  --info:          #007089;  --info-bg:    #e3f3f7;  --info-fg:    #005a70;

  /* ── Специальные ── */
  --upload:        #007089;  --upload-bg:  #e9f6f9;  --upload-border: #007089;  --upload-bg-hover: #dcf0f5;  --upload-bg-active: #cbe8f0;
  --process:       #2d4c5e;  --process-bg: #e9eef1;
  --result:        #073070;  --result-bg:  #e8eef8;

  /* ── Расхождения сравнения (бейджи) ── */
  --diff-match-bg:   var(--success-bg);  --diff-match-fg:   var(--success-fg);
  --diff-volume-bg:  var(--warning-bg);  --diff-volume-fg:  var(--warning-fg);
  --diff-rd-only-bg: var(--info-bg);     --diff-rd-only-fg: var(--info-fg);
  --diff-est-only-bg:#f6f1e4;            --diff-est-only-fg:#6b5a2e; /* золото бренда */

  /* ── JSON ── */
  --json-key:    #073070;
  --json-string: #1e6b3a;
  --json-number: #8a3b00;
  --json-bool:   #6a2c91;
  --json-null:   #5b6b7c;

  /* ── Типографика (шкала сайта: 14/16/18/24/32) ── */
  --font-main: "Roboto", "Segoe UI", Arial, sans-serif;  /* Roboto — локально, см. fonts.css */
  --font-mono: "Roboto Mono", ui-monospace, Consolas, monospace;
  --fs-xs: 12px;   /* только бейджи/метки, не основной текст */
  --fs-sm: 14px;   /* таблицы, подписи */
  --fs-md: 16px;   /* основной текст, поля */
  --fs-lg: 18px;   /* заголовок карточки */
  --fs-xl: 24px;   /* заголовок страницы */

  /* ── Отступы (8pt, как на сайте) ── */
  --space-1: 8px;  --space-2: 16px;  --space-3: 24px;  --space-4: 32px;  --space-6: 48px;

  /* ── Формы ── */
  --radius-sm: 6px;   /* кнопки, поля — как на сайте */
  --radius:   10px;   /* карточки — как на сайте */
  --radius-badge: 999px;
  --control-h: 44px;  /* минимальная высота кликабельного элемента */
  --shadow-card: 0 1px 2px rgba(7,48,112,.06), 0 4px 18px rgba(7,48,112,.08);
  --shadow-lg:   0 10px 40px rgba(7,48,112,.20);

  /* ── Движение ── */
  --t-fast: 120ms ease-out;   /* hover/focus */
  --t-base: 200ms ease-out;   /* раскрытие, появление */
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-primary: #7fa6ff; --color-primary-hover: #a3bfff; --color-primary-active: #c4d6ff;
  --color-primary-tint: #14284f; --color-on-primary: #051f4d; --on-solid: #07142d; --overlay: rgba(0, 0, 0, 0.65);
  --bg-page: #0b1426; --bg-surface: #111d36; --bg-elevated: #172544; --bg-sunken: #0b1426; --bg-sidebar: #07142d; --table-head-bg: #172544;
  --text-primary: #eef2f8; --text-secondary: #b6c2d3; --text-muted: #98a6ba; --text-disabled: #6b788c;
  --text-link: #9db9ff;
  --text-on-sidebar: #e6ebf5; --text-on-sidebar-muted: #a3b1c8; --text-on-sidebar-disabled: #8493ad;
  --sidebar-active-bg: #17305f; --sidebar-hover-bg: #10224a; --sidebar-divider: #1f2e4d; --sidebar-badge-bg: #1f2e4d; --sidebar-focus-ring: #5fc4dc;
  --border: #2a3a5c; --border-control: #7a8aa6; --divider: #1f2e4d;
  --hover-bg: #172544; --active-bg: #1d2f58;
  --focus-ring: #5fc4dc; --focus-halo: 0 0 0 2px var(--bg-page), 0 0 0 4px var(--focus-ring);
  --disabled-bg: #17233f; --disabled-fg: #7f8ca1;
  --success: #5bc489; --success-bg: #12301f; --success-fg: #8fe0b0;
  --warning: #e0a53d; --warning-bg: #3a2c0a; --warning-fg: #f2c970;
  --error:   #ff8a84; --error-bg:   #3d1517; --error-fg:   #ffb3ae;
  --info:    #5fc4dc; --info-bg:    #0f3340; --info-fg:    #9adcec;
  --upload: #5fc4dc; --upload-bg: #0f2f3a; --upload-border: #5fc4dc; --upload-bg-hover: #133a47; --upload-bg-active: #17465a;
  --process: #9db9c9; --process-bg: #142638;
  --result: #9db9ff; --result-bg: #14284f;
  --json-key: #9db9ff; --json-string: #8fe0b0; --json-number: #f2b27a; --json-bool: #d2a8ff; --json-null: #98a6ba;
  --shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 4px 18px rgba(0,0,0,.35);
}

/* Движение: уважать системную настройку */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Единый фокус для всего интерактива (раньше был только у input/select) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus-halo);
}
/* На тёмно-синем сайдбаре — светлое кольцо */
.sidebar :where(a, button):focus-visible {
  box-shadow: 0 0 0 2px var(--bg-sidebar), 0 0 0 4px var(--sidebar-focus-ring);
}