/* ILKSYNC — общие токены оформления. Один и тот же файл в apps/site, apps/admin, apps/client.
   Источник правил: docs/UI-STYLE.md. Менять только во всех трёх приложениях сразу. */
:root {
  /* палитра */
  --gold: #bf9d63;
  --gold-dark: #a8854b;
  --gold-soft: #f3ece0;
  /* золото для заливок с белым текстом: контраст 4.96:1 (обычный --gold даёт 2.6 и годится
     только для крупных цифр, значков и подложек) */
  --gold-ink: #8a6b33;
  --gold-ink-dark: #755a2a;
  --navy: #2b3542;
  --navy-700: #222b36;
  --navy-900: #1a222c;
  --ink: #2b3542;
  --text: #6f7680;
  --muted: #9aa1aa;
  /* тёмные варианты для текста на светлом: контраст не ниже 4.5:1 */
  --text-strong: #3b4450;
  --text-soft: #5f6873;
  --ok-ink: #2f6b45;
  --warn-ink: #8a6516;
  --err-ink: #8e352c;
  --info-ink: #2f5b85;
  --line: #e6e8eb;
  --line-soft: #f0f2f4;
  --bg: #ffffff;
  --bg-alt: #f6f7f9;

  /* состояния */
  --ok: #4f9d69;
  --ok-soft: #eaf4ed;
  --warn: #c9962f;
  --warn-soft: #fbf3e2;
  --err: #c0564b;
  --err-soft: #f9ebe9;
  --info: #4a7fb5;
  --info-soft: #eaf1f8;

  /* типографика */
  --display: "Playfair Display", "Lora", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* форма */
  --radius: 4px;
  --radius-lg: 6px;
  --shadow-sm: 0 1px 2px rgba(43, 53, 66, .05);
  --shadow: 0 2px 6px rgba(43, 53, 66, .06), 0 14px 32px -18px rgba(43, 53, 66, .25);
  --wrap: 1180px;

  /* совместимость со старыми именами переменных в кабинетах */
  --color-primary: var(--gold);
  --color-primary-dark: var(--gold-dark);
  --color-text: var(--text);
  --color-text-muted: var(--muted);
  --color-border: var(--line);
  --color-bg: var(--bg);
  --color-bg-alt: var(--bg-alt);
  --color-success: var(--ok);
  --color-warning: var(--warn);
  --color-error: var(--err);
  --color-info: var(--info);
}

/* базовая типографика: серифные заголовки, спокойный текст */
h1, h2, h3, h4, h5 {
  font-family: var(--display);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0;
  line-height: 1.25;
  margin: 0;
}

/* кнопки: прямоугольные, золотые, прописными */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 26px; border: 1px solid transparent; border-radius: var(--radius);
  font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.btn-primary { background: var(--gold-ink); color: #fff; }
.btn-primary:hover { background: var(--gold-ink-dark); color: #fff; text-decoration: none; }
.btn-outline, .btn-secondary { background: transparent; border-color: var(--gold); color: var(--gold-ink); }
.btn-outline:hover, .btn-secondary:hover { background: var(--gold); color: #fff; text-decoration: none; }
.btn-ghost { background: transparent; border-color: rgba(255, 255, 255, .5); color: #fff; }
.btn-ghost:hover { background: #fff; border-color: #fff; color: var(--navy); text-decoration: none; }
.btn-sm { padding: 7px 16px; font-size: 11.5px; letter-spacing: .06em; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* заголовок секции по центру с подписью */
.section-head { text-align: center; max-width: 720px; margin: 0 auto 34px; }
.section-head h2 { font-size: clamp(25px, 3vw, 34px); }
.section-head p { margin-top: 10px; color: var(--muted); font-size: 15px; }

/* крупные показатели */
.stat-value { font-family: var(--sans); font-weight: 600; font-size: clamp(30px, 4vw, 44px); color: var(--gold); line-height: 1; }
.stat-label { margin-top: 8px; font-size: 13px; color: var(--muted); }

/* мягкие плашки состояний */
.chip { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.chip-success { background: var(--ok-soft); color: #2f6b45; }
.chip-warning { background: var(--warn-soft); color: #8a6516; }
.chip-error { background: var(--err-soft); color: #8e352c; }
.chip-info { background: var(--info-soft); color: #2f5b85; }
.chip-neutral { background: var(--bg-alt); color: var(--muted); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }