/* ============================================================
   DESIGN TOKENS — единый источник базовых значений интерфейса.
   Подключается перед base.css. Компоненты используют переменные
   по смысловой роли, а не собственные копии цветов и размеров.
   ============================================================ */

:root {
  /* Поля и элементы управления */
  --field-pad-y: .6em;
  --field-pad-x: 1.1em;
  --field-pad-x-arrow: 2.2em;
  --field-radius: var(--radius-pill);
  --field-line: 1.25;

  /* Ритм форм */
  --gap-field: 1em;
  --gap-label: .5em;
  --line-label: 1.4;

  /* Основная палитра */
  --c-accent: #557a95;
  --c-accent-soft: #79aec8;
  --c-text: #444444;
  --c-muted: #767676;
  --c-placeholder: #9a9a9a;
  --c-border: #bdbdbd;
  --c-border-hover: #9a9a9a;
  --c-surface: #ffffff;
  --c-surface-muted: #f5f5f5;
  --c-locked-bg: #f6f7f8;
  --c-danger: #ca3c3c;
  --c-error: #e11d48;
  --c-warn: #f59e0b;
  --c-success: #10b981;

  /* Скругления */
  --radius-sm: .5em;
  --radius-md: .65em;
  --radius-lg: 1.2em;
  --radius-pill: 999px;

  /* Повторяемые тени */
  --shadow-focus: 0 0 0 3px rgba(85, 122, 149, .15);
  --shadow-control-inset: inset 0 1px 2px rgba(0, 0, 0, .04);
  --shadow-popup: 0 8px 24px rgba(0, 0, 0, .16);
}