/* ═══════════════════════════════════════════════════════════════════
   ДИЗАЙН-ТОКЕНЫ — единый источник правды для палитры/типографики/радиусов.
   Используется и публичным сайтом (design-system.css), и мессенджером
   (chat.css). При смене бренда правится здесь, эффект — по всему проекту.
═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Цвет: бренд ─────────────────────────────────────────── */
  --c-brand:           #7051ae;
  --c-brand-hover:     #5d4293;
  --c-brand-active:    #4a3576;
  --c-brand-soft:      #ebe3f3;   /* фон активного nav-item, аватар-bg-стоп */
  --c-brand-softer:    #f5f1fa;   /* hover/active фон chip */
  --c-brand-bubble:    #f0ebf8;   /* bubble-out (исходящие сообщения) */
  --c-brand-ghost:     rgba(112, 81, 174, 0.08);
  --c-brand-pending:   #b6a1d4;   /* dashed-border для pending-баблов */
  --c-brand-accent:    #9579bf;   /* second accent (focus-ring, secondary buttons) */
  --c-brand-decor:     #eb99ed;   /* pink accent — только для декоративных полосок */

  /* ── Цвет: фоны и поверхности ────────────────────────────── */
  --c-bg-shell:        #f8f7fa;   /* shell вне чата (background body) */
  --c-bg-chat:         #fdfcfd;   /* фон самого чата — максимально чистый */
  --c-surface:         #ffffff;   /* карточки, бабл-терапевта, sidebar */
  --c-surface-muted:   rgba(234, 230, 240, 0.5);  /* system-bubble bg */

  /* ── Цвет: текст ─────────────────────────────────────────── */
  --c-text:            #2d2a32;
  --c-text-secondary:  #6e6b74;
  --c-text-muted:      #8a8693;
  --c-text-faint:      #aba8b2;
  --c-text-on-brand:   #ffffff;

  /* ── Цвет: границы и разделители ─────────────────────────── */
  --c-border:          #eae6f0;
  --c-border-soft:     #f0eef3;
  --c-border-brand:    rgba(112, 81, 174, 0.10);  /* граница бабла-терапевта */

  /* ── Цвет: статусы ───────────────────────────────────────── */
  --c-online:          #22c55e;
  --c-online-ring:     rgba(34, 197, 94, 0.20);
  --c-danger:          #e74c3c;
  --c-warn:            #f59e0b;

  /* ── Типографика ─────────────────────────────────────────── */
  --font-sans:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:         'Roboto Mono', ui-monospace, SFMono-Regular, Consolas, monospace;

  --fs-xs:             11.5px;
  --fs-sm:             12.5px;
  --fs-base:           14px;
  --fs-md:             15.5px;   /* размер текста в баблах */
  --fs-lg:             17px;
  --fs-xl:             20px;
  --fs-2xl:            24px;
  --fs-3xl:            32px;
  --fs-4xl:            40px;

  --lh-tight:          1.2;
  --lh-normal:         1.5;
  --lh-relaxed:        1.6;

  --fw-regular:        400;
  --fw-medium:         500;
  --fw-semibold:       600;

  /* ── Радиусы ─────────────────────────────────────────────── */
  --r-sm:              6px;
  --r-md:              10px;
  --r-lg:              12px;
  --r-xl:              16px;
  --r-2xl:             20px;     /* основной радиус баблов и карточек */
  --r-pill:            999px;

  /* ── Тени ────────────────────────────────────────────────── */
  --shadow-sm:         0 1px 2px rgba(45, 42, 50, 0.04);
  --shadow-md:         0 1px 3px rgba(45, 42, 50, 0.04);
  --shadow-lg:         0 4px 20px rgba(45, 42, 50, 0.08);
  --shadow-focus:      0 0 0 3px rgba(112, 81, 174, 0.10);
  --shadow-shell:      0 0 40px rgba(0, 0, 0, 0.04);

  /* ── Раскладка ───────────────────────────────────────────── */
  --w-sidebar:         320px;
  --w-content-max:     1080px;   /* max-width контента на внутренних страницах */
  --w-content-chat:    880px;    /* max-width на chat-home: совпадает с composer'ом */
  --h-header:          70px;
  --h-mobile-header:   56px;

  /* ── Анимации ────────────────────────────────────────────── */
  --t-fast:            120ms ease-out;
  --t-base:            180ms ease-out;
  --t-slow:            300ms ease-out;

  /* ── z-index слои ────────────────────────────────────────── */
  /* Overlay ниже drawer'а, чтобы drawer оставался кликабельным
     поверх затемнения. Modal над всем, toast — самый верх. */
  --z-sticky:          50;
  --z-overlay:         80;
  --z-drawer:          90;
  --z-modal:           100;
  --z-toast:           200;
}