:root {
  --bg:        #f0f2f5;
  --bg2:       #ffffff;
  --bg3:       #e4e8ef;
  --border:    #c8cfd9;
  --border2:   #b0bac9;
  --text:      #1a2232;
  --text2:     #4a5568;
  /* Текст третьего уровня. Был #8a97aa = 2.96:1 на белом и 2.64:1 на --bg,
     то есть не дотягивал даже до порога для КРУПНОГО текста (3.0), а стоял на
     подписях и единицах размером 8-9px. Сейчас 5.27:1 на белом и 4.70:1 на
     --bg — AA выполняется на обоих фонах, при этом остаётся светлее --text2
     (7.53), так что иерархия текст > текст2 > текст3 сохранена.
     Оттенок прежний: изменена только светлота, H и S те же. */
  --text3:     #5e6d82;
  /* Прежний #8a97aa переехал сюда. Он служил ДВУМ задачам: цвет подписей и
     заливка нейтральных индикаторов («связи нет», «насос выключен», точки в
     списках). Требование контраста относится только к тексту, а индикаторы от
     затемнения стали бы заметнее, чем состояние, которое они означают.
     Поэтому один токен на одну задачу: --text3 — текст, --muted — заливки. */
  --muted:     #8a97aa;
  --accent:    #1a6ef5;
  --accent-l:  #e8f0fe;
  --green:     #0da86a;
  --green-l:   #e6f7f1;
  --red:       #e03030;
  --red-l:     #fde8e8;
  --orange:    #e07820;
  --orange-l:  #fdf0e3;
  --purple:    #7c3aed;
  --purple-l:  #f1eafe;
  --u:         min(1vw, 1.6vh);
  --nav-w:     clamp(60px, 5vw, 150px);
  --top-h:     clamp(44px, 5vh, 120px);
  --sens-h:    clamp(74px, 8.6vh, 205px);
  --mono:      'JetBrains Mono', monospace;
  --ui:        'Manrope', sans-serif;
  --r:         clamp(4px, calc(0.5 * var(--u)), 14px);
  --r2:        clamp(6px, calc(0.7 * var(--u)), 20px);
  --hbar-bg:   #4a5060;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--ui); }
button { cursor: pointer; font-family: inherit; }

/* ── Видимый фокус клавиатуры ──────────────────────────────────────────────
   :focus-visible, а не :focus — браузер сам решает, показывать ли кольцо:
   при клике мышью/пальцем его не будет, при Tab будет. Кольцо двойное:
   белая внутренняя обводка + акцентный ореол снаружи. Одинарного акцентного
   не хватает — половина кликабельных элементов живёт на тёмных поверхностях
   (навбар #1e2a3a, hbar var(--hbar-bg), степперы #1a2232), где синий на синем
   не читается. Белое кольцо видно на тёмном, акцентное — на светлом.
   outline-offset отодвигает кольцо от элемента, чтобы не съедало содержимое. */
:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
  box-shadow: 0 0 0 4px var(--accent);
}
/* Поля, которые гасят фокус своим оформлением, обязаны вернуть кольцо.
   Дело не в порядке файлов, а в специфичности: `.md-cfg-input:focus` и
   `.uc-req-input:focus` — это (0, 2, 0), ровно столько же, сколько у голого
   `.md-cfg-input:focus-visible`, и при равенстве побеждает файл, подключённый
   ПОЗЖЕ (страничные css грузятся после variables.css). Поэтому добавляем тип
   элемента — становится (0, 2, 1) и правило выигрывает независимо от порядка.
   У `.stepper input { outline:none }` специфичность (0, 1, 1), её перебивает
   уже `.stepper input:focus-visible` = (0, 2, 1). */
.stepper input:focus-visible, input.md-cfg-input:focus-visible, input.uc-req-input:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
  box-shadow: 0 0 0 4px var(--accent);
}
/* Системная настройка «меньше движения» кольца не касается — оно статично. */