/* Aeterna: единый слой дизайн-токенов. Подключается один раз на каждой странице (стартовая, вход, кабинет, панель владельца).
   Правило: в стилях страниц нет цветов, размеров шрифта, отступов и времён анимации «от руки», только var(--токен).
   Тёмная тема включается сама по настройке системы; принудительно: <html data-theme="dark|light">. */

:root {
  color-scheme: light;

  /* Поверхности: тёплая бумага, а не чистый белый */
  --bg: #f5f2eb;
  --surface: #fcfbf8;
  --surface-2: #eeeae0;
  --surface-sunken: #e8e3d7;
  --line: #ddd7c9;
  --line-strong: #bdb6a3;
  --scrim: rgba(22, 24, 43, .52);

  /* Текст: тёмно-синие чернила на бумаге */
  --text: #16182b;
  --text-2: #4a4d62;
  --text-3: #62657a;
  --on-ink: #f5f2eb;

  /* Основное действие: чернильный. Единственный акцент: латунь (для отметок, не для крупных заливок) */
  --ink: #16182b;
  --ink-hover: #2a2d47;
  --accent: #b8862b;
  --accent-strong: #8a5f12;
  --accent-text: #7a5410;
  --accent-tint: #f3e7cb;
  --on-accent: #16182b;

  /* Смысловые цвета: всегда вместе с иконкой и текстом */
  --success: #1a6e43;
  --success-tint: #dcefe3;
  --warning: #8a5a0b;
  --warning-tint: #f6e7c6;
  --danger: #b3261e;
  --danger-tint: #f7dedb;

  /* Тёмные панели (решение, итоговый блок, кредиты): в тёмной теме не белые плиты, а приподнятая поверхность */
  --panel: var(--ink);
  --on-panel: var(--on-ink);

  /* Фирменный цвет WhatsApp для кнопки связи (цвет чужого бренда, задан один раз) */
  --wa: #1a7f46;
  --on-wa: #ffffff;

  /* Диалоги: клиент, ассистент (латунь), менеджер (чернила) */
  --bubble-in: #fcfbf8;
  --bubble-bot: #f3e7cb;
  --bubble-mgr: #dfe2ef;
  --bubble-sys: #e8e3d7;

  /* Аватары клиентов: белый текст на каждом, контраст не ниже 4.5 */
  --av-1: #1a6e43; --av-2: #4a4d62; --av-3: #1f5f99; --av-4: #9a2f6e; --av-5: #8a4a0b; --av-6: #5a3fa0; --av-7: #a33027; --av-8: #1c6a62;
  --on-av: #ffffff;
  /* QR-код всегда чёрным по белому, в любой теме */
  --qr-ink: #000000; --qr-paper: #ffffff;

  /* Тени только у всплывающих слоёв; карточки плоские */
  --shadow-pop: 0 18px 48px rgba(22, 24, 43, .18), 0 2px 8px rgba(22, 24, 43, .08);

  /* Типографика */
  --font: "Golos Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --fs-caption: .8125rem;   /* 13 */
  --fs-small: .875rem;      /* 14 */
  --fs-body: 1rem;          /* 16 */
  --fs-lead: 1.25rem;       /* 20 */
  --fs-h3: 1.375rem;        /* 22 */
  --fs-h2: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  --fs-display: clamp(2.5rem, 1.4rem + 4.6vw, 4.75rem);
  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-body: 1.55;
  --tracking-display: -.03em;
  --tracking-h: -.02em;

  /* Ритм 4px */
  --s-1: .25rem;
  --s-2: .5rem;
  --s-3: .75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-9: 7rem;

  /* Форма */
  --r-1: .375rem;
  --r-2: .625rem;
  --r-3: .875rem;
  --r-4: 1.25rem;
  --r-pill: 62.4375rem;
  --hit: 2.75rem;           /* минимальная цель нажатия, 44px */

  /* Движение */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 320ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0e1020;
    --surface: #161a2e;
    --surface-2: #1d2238;
    --surface-sunken: #0a0c19;
    --line: #2a2f4a;
    --line-strong: #444a6b;
    --scrim: rgba(4, 5, 14, .66);
    --text: #ece9f2;
    --text-2: #b4b7cc;
    --text-3: #9a9eb6;
    --on-ink: #0e1020;
    --ink: #ece9f2;
    --ink-hover: #ffffff;
    --accent: #e0b25a;
    --accent-strong: #f0c878;
    --accent-text: #e8c06e;
    --accent-tint: #2f2819;
    --on-accent: #0e1020;
    --panel: var(--surface-2);
    --on-panel: var(--text);
    --success: #5bc98d;
    --success-tint: #143021;
    --warning: #e8b64f;
    --warning-tint: #3a2c0f;
    --danger: #ff8a80;
    --danger-tint: #3b1c1a;
    --bubble-in: #1d2238;
    --bubble-bot: #2f2819;
    --bubble-mgr: #262c4a;
    --bubble-sys: #161a2e;
    --shadow-pop: 0 18px 48px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .35);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1020; --surface: #161a2e; --surface-2: #1d2238; --surface-sunken: #0a0c19; --line: #2a2f4a; --line-strong: #444a6b; --scrim: rgba(4, 5, 14, .66);
  --text: #ece9f2; --text-2: #b4b7cc; --text-3: #9a9eb6; --on-ink: #0e1020; --ink: #ece9f2; --ink-hover: #ffffff;
  --accent: #e0b25a; --accent-strong: #f0c878; --accent-text: #e8c06e; --accent-tint: #2f2819; --on-accent: #0e1020;
  --panel: var(--surface-2); --on-panel: var(--text);
  --success: #5bc98d; --success-tint: #143021; --warning: #e8b64f; --warning-tint: #3a2c0f; --danger: #ff8a80; --danger-tint: #3b1c1a;
  --bubble-in: #1d2238; --bubble-bot: #2f2819; --bubble-mgr: #262c4a; --bubble-sys: #161a2e;
  --shadow-pop: 0 18px 48px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .35);
}

/* Общая база: одинаковая для всех страниц */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: var(--fs-body)/var(--lh-body) var(--font); color: var(--text); background: var(--bg); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
img, svg { max-width: 100%; }
.hide { display: none !important; }

/* Фокус виден всегда и всем */
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-radius: var(--r-1); }

/* Кнопки: восемь состояний (обычная, наведение, фокус, нажатие, отключена, загрузка, ошибка у поля, выбрано) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: var(--hit); padding: 0 var(--s-5); border: 1px solid transparent; border-radius: var(--r-3);
  background: var(--ink); color: var(--on-ink); font-weight: 500; font-size: var(--fs-small); cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease); }
.btn:hover { background: var(--ink-hover); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { opacity: .75; cursor: progress; }
.btn.secondary { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn.secondary:hover { background: var(--surface-2); }
.btn.danger { background: var(--danger); color: var(--on-ink); }
.btn.small { min-height: 2.25rem; padding: 0 var(--s-4); }
.btn.large { min-height: 3.25rem; padding: 0 var(--s-6); font-size: var(--fs-body); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}