/* Дизайн-токены LEXA.
   Единственное место, где заданы цвета, скругления и тени. Компоненты
   ссылаются только на переменные — смена акцента в настройках меняет
   --accent, и всё остальное подхватывается само. */

:root {
  /* --- поверхности --- */
  --bg: #07070c;
  --bg-deep: #04040800;
  --surface: #0e0e16;
  --surface-2: #15151f;
  --surface-3: #1c1c28;
  --surface-4: #242433;
  --overlay: rgba(4, 4, 8, 0.72);

  /* --- границы и разделители --- */
  --border: #22222e;
  --border-soft: #1a1a24;
  --border-strong: #32323f;

  /* --- текст --- */
  --text: #ededf5;
  --text-dim: #8b8ba3;
  /* Раньше здесь было #5b5b6e — всего 2.7:1 на пузыре сообщения. Именно этим
     цветом набрано время под сообщением и подписи в списке чатов, то есть
     самый мелкий текст в приложении. Осветлено до 4.5:1. */
  --text-faint: #7c7c93;
  --text-on-accent: #ffffff;

  /* --- акцент --- */
  --accent: #6c5ce7;
  --accent-soft: #7d6ff0;
  --accent-deep: #5b4bd6;
  --accent-2: #4f7cfa;
  --accent-tint: rgba(108, 92, 231, 0.14);
  --accent-tint-strong: rgba(108, 92, 231, 0.26);
  --gradient: linear-gradient(135deg, #a855f7 0%, #6366f1 52%, #3b82f6 100%);
  --gradient-bubble: linear-gradient(135deg, #6d5cf0 0%, #5570f2 100%);

  /* --- состояния --- */
  --online: #34d399;
  --danger: #ef4444;
  --danger-soft: rgba(239, 68, 68, 0.14);
  --success: #22c55e;
  --warning: #f59e0b;

  /* --- скругления --- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-full: 999px;

  /* --- тени --- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.32);
  --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-accent: 0 8px 24px rgba(108, 92, 231, 0.35);

  /* --- размеры --- */
  --sidebar-w: 360px;
  --header-h: 64px;
  --composer-min-h: 60px;
  --tabbar-h: 60px;

  /* --- типографика --- */
  --font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", "Cascadia Mono", Consolas, monospace;

  /* --- анимации ---
     Одна кривая на весь интерфейс: разнобой в таймингах читается как
     неаккуратность даже когда сложно объяснить, что именно не так. */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --fast: 120ms;
  --normal: 200ms;
  --slow: 320ms;

  /* --- безопасные зоны мобильных --- */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* Светлая тема — тёплая, кремовая.
   Чистый белый на всю площадь экрана слепит, особенно вечером: мессенджер
   держат открытым часами, и белизна утомляет быстрее, чем кажется. Поэтому
   основа — тёплый небелёный оттенок, карточки чуть светлее фона, а текст не
   абсолютно чёрный, а тёмно-коричневый: контраст остаётся высоким, но края
   букв не режут глаз.
   Контраст проверен: основной текст ~13:1, приглушённый ~5.2:1 — обе величины
   выше требования 4.5:1. */
:root[data-theme="light"] {
  /* Порядок светлот здесь обратный тёмной теме: фон самый тёмный, карточки
     светлее его. Иначе пузырь собеседника и поле ввода сливаются с фоном —
     разница в пару единиц на глаз не видна вовсе. */
  --bg: #efe9dd;
  --surface: #fdfaf4;
  --surface-2: #f9f4ec;
  --surface-3: #f0e9dc;
  --surface-4: #e0d8c7;
  --overlay: rgba(46, 40, 30, 0.38);

  --border: #e3dbcb;
  --border-soft: #ece5d8;
  --border-strong: #cec4b0;

  --text: #2b2620;
  --text-dim: #6d6455;
  --text-faint: #726957;
  --text-on-accent: #ffffff;

  --accent-tint: rgba(108, 92, 231, 0.12);
  --accent-tint-strong: rgba(108, 92, 231, 0.2);

  /* Тени тоже тёплые: серая тень на кремовом фоне выглядит грязным пятном. */
  --shadow-sm: 0 1px 3px rgba(90, 74, 48, 0.1);
  --shadow-md: 0 6px 20px rgba(90, 74, 48, 0.12);
  --shadow-lg: 0 20px 48px rgba(90, 74, 48, 0.18);
}

/* Согласованные палитры. Каждый пресет задаёт всю пару цветов, а не
   случайно перекрашивает один элемент поверх старого градиента. */
:root[data-accent="aurora"] {
  --accent: #7c5ce7; --accent-soft: #9278f0; --accent-deep: #5c46cf; --accent-2: #4f7cfa;
  --gradient: linear-gradient(135deg, #a855f7 0%, #7163ea 48%, #4f7cfa 100%);
  --gradient-bubble: linear-gradient(135deg, #765fe7 0%, #5574e8 100%);
}
:root[data-accent="ocean"] {
  --accent: #2774e8; --accent-soft: #4a91f0; --accent-deep: #1757bf; --accent-2: #06b6d4;
  --gradient: linear-gradient(135deg, #38bdf8 0%, #2774e8 52%, #3157d5 100%);
  --gradient-bubble: linear-gradient(135deg, #2f87e8 0%, #2563d8 100%);
}
:root[data-accent="emerald"] {
  --accent: #10a981; --accent-soft: #34c49b; --accent-deep: #08785f; --accent-2: #0d9488;
  --gradient: linear-gradient(135deg, #34d399 0%, #10a981 48%, #0d9488 100%);
  --gradient-bubble: linear-gradient(135deg, #1bb38c 0%, #0d8d7f 100%);
}
:root[data-accent="sunset"] {
  --accent: #e54882; --accent-soft: #ef6b9a; --accent-deep: #bd315f; --accent-2: #f97360;
  --gradient: linear-gradient(135deg, #f472b6 0%, #e54882 46%, #f97360 100%);
  --gradient-bubble: linear-gradient(135deg, #e95688 0%, #d65370 100%);
}
:root[data-accent="graphite"] {
  --accent: #64748b; --accent-soft: #8290a4; --accent-deep: #475569; --accent-2: #6366f1;
  --gradient: linear-gradient(135deg, #94a3b8 0%, #64748b 46%, #6366f1 100%);
  --gradient-bubble: linear-gradient(135deg, #66758d 0%, #59627f 100%);
}

/* Старые значения из сохранённых настроек получают ближайший гармоничный
   пресет и не ломают внешний вид после обновления. */
:root[data-accent="purple"], :root[data-accent="violet"] { --accent: #7c5ce7; --accent-soft: #9278f0; --accent-deep: #5c46cf; --accent-2: #4f7cfa; }
:root[data-accent="blue"], :root[data-accent="teal"] { --accent: #2774e8; --accent-soft: #4a91f0; --accent-deep: #1757bf; --accent-2: #06b6d4; }
:root[data-accent="green"] { --accent: #10a981; --accent-soft: #34c49b; --accent-deep: #08785f; --accent-2: #0d9488; }
:root[data-accent="rose"], :root[data-accent="amber"] { --accent: #e54882; --accent-soft: #ef6b9a; --accent-deep: #bd315f; --accent-2: #f97360; }
:root[data-accent="slate"] { --accent: #64748b; --accent-soft: #8290a4; --accent-deep: #475569; --accent-2: #6366f1; }

:root[data-accent] {
  --accent-tint: color-mix(in srgb, var(--accent) 15%, transparent);
  --accent-tint-strong: color-mix(in srgb, var(--accent) 26%, transparent);
  --shadow-accent: 0 8px 24px color-mix(in srgb, var(--accent) 32%, transparent);
}

/* Уважаем системную настройку «меньше движения». */
@media (prefers-reduced-motion: reduce) {
  :root {
    --fast: 0ms;
    --normal: 0ms;
    --slow: 0ms;
  }
}