/* theme.css — дизайн-токены и базовые компоненты trust_ai.
   Фирменный стиль AIPLUS: синий #1472C2 (основной), оранжевый #FAA318 (акцент),
   тёмно-синие #193B53 / #0A1A30, белый; кнопки-пилюли и крупные скругления.

   Контраст акцента: белый на #FAA318 даёт 2.04:1 — на сайте центра именно так,
   но это провал AA, поэтому здесь на оранжевом всегда тёмный текст #402D00
   (6.47:1). Белый остаётся только на синем (#1472C2 → 4.98:1).

   Структура, компоненты и принципы — docs/design/direction.md; палитра «trust
   navy» из этого документа заменена фирменной AIPLUS (док требует обновления).

   Подключается ДО style.css (кабинет) и ДО sign.css (подписант):
     <link rel="stylesheet" href="/static/theme.css">
   Файл самодостаточный: без внешних запросов (CSP: default-src 'self'),
   шрифт self-hosted из /static/fonts/. Фреймворков и сборщика нет (spec § 3.2, 3.3).
   Фирменный Gilroy сайта — коммерческая лицензия, self-host запрещён: остаётся Inter.

   Слои:
     1. @font-face                — Inter (OFL), 2 начертания: 400 / 600.
     2. :root                     — токены: цвет, типографика, spacing, radius, тени.
     3. Базовые компоненты        — .btn, .field/.control, .card, .badge/.status-*,
                                    .table, .alert, утилиты.
   Поверх этих классов строятся оба слоя: кабинет (desktop-first)
   и страницы подписанта (mobile-first). */

/* ---------- 1. Шрифт ---------- */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/Inter-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/Inter-SemiBold.woff2") format("woff2");
}

/* ---------- 2. Токены ---------- */

:root {
  /* Типографика. Только 400 и 600 — других начертаний в поставке нет. */
  --font-sans: "Inter", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;

  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 15px;   /* кабинет */
  --text-md: 16px;     /* подписант: минимум 16px, iOS не зумит поля ввода */
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;

  --leading-tight: 1.3;
  --leading-normal: 1.5;

  --weight-regular: 400;
  --weight-semibold: 600;

  /* Нейтральные поверхности: холодный slate с подмесом фирменного синего. */
  --color-bg: #f1f5fa;
  --color-surface: #ffffff;
  --color-surface-subtle: #f7fafd;
  --color-border: #dae3ee;
  --color-border-strong: #b2c3d4;

  /* Тексты — фирменные тёмно-синие, а не чёрный. */
  --color-text: #0a1a30;          /* 17.45:1 на белом */
  --color-text-muted: #4a6076;    /* 6.51:1 на белом, 5.95:1 на --color-bg */
  /* subtle читаем и на --color-bg: 5.30:1 на #fff, 4.84:1 на #f1f5fa (AA для 12–13px). */
  --color-text-subtle: #556e86;

  /* Бренд AIPLUS: синий. Белый на нём 4.98:1 — AA для кнопок и шапок. */
  --color-primary: #1472c2;
  --color-primary-hover: #115fa3;
  --color-primary-active: #0e4f87;
  --color-on-primary: #ffffff;
  /* Синий текстом по светлому фону: 6.58:1 на белом, 5.81:1 на --color-primary-soft. */
  --color-primary-strong: #115fa3;
  --color-primary-soft: #e8f2fb;
  --color-primary-soft-border: #bbd9f1;

  /* Акцент AIPLUS: оранжевый. Текст на нём только тёмный (#402D00 → 6.47:1). */
  --color-accent: #faa318;
  --color-accent-hover: #ee9a10;
  --color-accent-active: #dc8d0a;
  --color-on-accent: #402d00;
  --color-accent-soft: #fef2dc;
  --color-accent-soft-border: #fbd68a;

  /* Белый по фирменному синему фону (страницы подписанта). */
  --color-on-brand: #ffffff;              /* 4.98:1 на #1472C2 */
  --color-on-brand-muted: rgba(255, 255, 255, 0.94); /* 4.61:1 на #1472C2 */

  --color-focus: #1472c2;
  --color-focus-ring: rgba(20, 114, 194, 0.22);

  /* Семантика. Текстовые цвета читаются на своих мягких фонах (AA+). */
  --color-success: #047857;
  --color-success-bg: #ecfdf5;
  --color-success-border: #a7f3d0;

  --color-danger: #b91c1c;
  --color-danger-solid: #dc2626;
  --color-danger-solid-hover: #b91c1c;
  --color-danger-bg: #fef2f2;
  --color-danger-border: #fecaca;

  /* Предупреждение — на фирменном янтаре: 6.50:1. */
  --color-warning: #7a4e00;
  --color-warning-bg: #fef2dc;
  --color-warning-border: #fbd68a;

  /* Инфо — на фирменном синем: 5.81:1. */
  --color-info: #115fa3;
  --color-info-bg: #e8f2fb;
  --color-info-border: #bbd9f1;

  /* Статусы договора: draft → pending_client → signed → terminated | revoked.
     Цвет дублируется текстом бейджа — на цвет в одиночку не полагаемся. */
  --status-draft-text: #44566b;
  --status-draft-bg: #eef3f8;
  --status-draft-border: #cbd6e2;
  --status-draft-dot: #8fa3b8;

  /* pending — фирменный янтарь на базе #FAA318: текст 6.50:1 на своём фоне. */
  --status-pending-text: #7a4e00;
  --status-pending-bg: #fef2dc;
  --status-pending-border: #fbd68a;
  --status-pending-dot: #faa318;

  --status-signed-text: #065f46;
  --status-signed-bg: #d1fae5;
  --status-signed-border: #a7f3d0;
  --status-signed-dot: #10b981;

  --status-revoked-text: #991b1b;
  --status-revoked-bg: #fee2e2;
  --status-revoked-border: #fecaca;
  --status-revoked-dot: #ef4444;

  /* termination_pending — тот же янтарь, что у ожидания клиента при подписании:
     в обоих случаях мяч на стороне клиента. */
  --status-termination-pending-text: #7a4e00;
  --status-termination-pending-bg: #fef2dc;
  --status-termination-pending-border: #fbd68a;
  --status-termination-pending-dot: #faa318;

  /* terminated — графит, не красный: договор был заключён и исполнялся, это не
     отказ от документа, а закрытие действующего (текст бейджа «Расторгнут»). */
  --status-terminated-text: #3f3f46;
  --status-terminated-bg: #e7e5e4;
  --status-terminated-border: #d6d3d1;
  --status-terminated-dot: #71717a;

  /* Spacing: шаг 4px. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* Радиусы — округлая геометрия AIPLUS: поля 10px, плашки 12px, карточки 16px,
     кнопки и бейджи — пилюли. */
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* Тени: едва заметные, авторитет строится на контрасте и бордерах. */
  --shadow-sm: 0 1px 2px rgba(10, 26, 48, 0.06);
  --shadow-md: 0 1px 3px rgba(10, 26, 48, 0.08), 0 4px 12px rgba(10, 26, 48, 0.06);
  /* Карточка подписанта лежит на фирменном синем — ей нужна тень поплотнее. */
  --shadow-lg: 0 12px 32px rgba(10, 26, 48, 0.18);

  /* Контролы. Мобильный примари-таргет не ниже 48px, минимум касания 44px. */
  --control-h: 40px;
  --touch-target: 44px;
  --control-h-mobile: 48px;

  --transition-fast: 150ms ease;
}

/* ---------- 3. Базовые компоненты ---------- */

/* Кнопки-пилюли: одна .btn-primary на экран, остальное — secondary/ссылки. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-h);
  padding: 0 var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.btn:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-primary {
  color: var(--color-on-primary);
  background: var(--color-primary);
}
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-primary:active { background: var(--color-primary-active); }

/* Акцентная кнопка: только тёмный текст на оранжевом (белый дал бы 2.04:1). */
.btn-accent {
  color: var(--color-on-accent);
  background: var(--color-accent);
}
.btn-accent:hover { background: var(--color-accent-hover); }
.btn-accent:active { background: var(--color-accent-active); }

.btn-secondary {
  color: var(--color-text);
  background: var(--color-surface);
  border-color: var(--color-border-strong);
}
.btn-secondary:hover { background: var(--color-surface-subtle); }
.btn-secondary:active { background: var(--color-primary-soft); }

.btn-danger {
  color: #ffffff;
  background: var(--color-danger-solid);
}
.btn-danger:hover,
.btn-danger:active { background: var(--color-danger-solid-hover); }

/* Мобильный вариант: во всю ширину, под палец. */
.btn-block {
  display: flex;
  width: 100%;
  min-height: var(--control-h-mobile);
  font-size: var(--text-md);
}

.btn-sm {
  min-height: 32px;
  padding: 0 var(--space-4);
  font-size: var(--text-sm);
}

/* Поля формы: лейбл сверху, подсказка и ошибка снизу. */
.field {
  margin-bottom: var(--space-4);
}

.field > label,
.field > .label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.control {
  width: 100%;
  min-height: var(--control-h);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.control::placeholder { color: var(--color-text-subtle); }

.control:focus,
.control:focus-visible {
  outline: none;
  border-color: var(--color-focus);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.control:disabled,
.control[readonly] {
  background: var(--color-surface-subtle);
  color: var(--color-text-muted);
}

.field-invalid .control {
  border-color: var(--color-danger-solid);
}
.field-invalid .control:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

.field-error {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--color-danger);
}

.hint {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Карточка — основная поверхность обоих интерфейсов. */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

/* Бейджи статусов договора. Точка ::before + текст: цвет не единственный носитель. */
.badge,
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.6;
  white-space: nowrap;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  background: var(--color-surface-subtle);
}

.badge::before,
.status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--color-text-subtle);
  flex: none;
}

.status-draft {
  color: var(--status-draft-text);
  background: var(--status-draft-bg);
  border-color: var(--status-draft-border);
}
.status-draft::before { background: var(--status-draft-dot); }

.status-pending_client {
  color: var(--status-pending-text);
  background: var(--status-pending-bg);
  border-color: var(--status-pending-border);
}
.status-pending_client::before { background: var(--status-pending-dot); }

.status-signed {
  color: var(--status-signed-text);
  background: var(--status-signed-bg);
  border-color: var(--status-signed-border);
}
.status-signed::before { background: var(--status-signed-dot); }

.status-revoked {
  color: var(--status-revoked-text);
  background: var(--status-revoked-bg);
  border-color: var(--status-revoked-border);
}
.status-revoked::before { background: var(--status-revoked-dot); }

.status-termination_pending {
  color: var(--status-termination-pending-text);
  background: var(--status-termination-pending-bg);
  border-color: var(--status-termination-pending-border);
}
.status-termination_pending::before { background: var(--status-termination-pending-dot); }

.status-terminated {
  color: var(--status-terminated-text);
  background: var(--status-terminated-bg);
  border-color: var(--status-terminated-border);
}
.status-terminated::before { background: var(--status-terminated-dot); }

/* Таблица (список договоров, журнал событий). Обёртка даёт скролл на узких экранах. */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
}

.table th {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  background: var(--color-surface-subtle);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

.table tbody tr:hover { background: var(--color-surface-subtle); }

.table a {
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}
.table a:hover { text-decoration: underline; }

/* Кликабельная строка списка договоров: каждая ячейка обёрнута в ссылку.
   Отрицательный margin растягивает ссылку на padding ячейки, поэтому клик
   срабатывает по всей площади строки, а не только по тексту. */
.table .row-link {
  display: block;
  margin: calc(-1 * var(--space-3));
  padding: var(--space-3);
  color: inherit;
  font-weight: inherit;
}
.table .row-link:hover { text-decoration: none; }
.table .row-link-number {
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
}

/* Алерты: ошибка / уведомление / успех. */
.alert {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.alert-error {
  color: var(--color-danger);
  background: var(--color-danger-bg);
  border-color: var(--color-danger-border);
}

.alert-notice {
  color: var(--color-info);
  background: var(--color-info-bg);
  border-color: var(--color-info-border);
}

.alert-success {
  color: var(--color-success);
  background: var(--color-success-bg);
  border-color: var(--color-success-border);
}

/* Утилиты. */
.muted { color: var(--color-text-muted); }

.mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  word-break: break-all;
}

/* Табличные цифры: суммы, даты, ИИН, номера — колонки не «пляшут». */
.tabular-nums { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .btn, .control { transition: none; }
}