/* Glassmorphism Variables */
:root {
    /* Основные фоны (Черный) */
    --bg-main: #050505; 
    --bg-sidebar: rgba(20, 20, 20, 0.65); 
    --bg-input: rgba(255, 255, 255, 0.06);
    --bg-hover: rgba(255, 255, 255, 0.1);
    
    /* Акценты (Темно-оранжевый).
       --accent-rgb - тот же цвет числами: из него собираются все
       полупрозрачные оттенки (подсветки, свечения, рамки). Без него они
       были прописаны оранжевым намертво, и выбранный синий цвет
       оформления оставлял пол-интерфейса рыжим. */
    --accent: #f57c00;
    --accent-rgb: 245, 124, 0;
    --accent-hover: #ff9800;
    
    /* Сообщения */
    --msg-my: linear-gradient(135deg, #e65100 0%, #ff7043 100%);
    --msg-other: rgba(30, 30, 30, 0.8);
    
    /* Текст */
    --text-main: #f0f0f0;
    --text-muted: #9ba0a6;
    
    /* Статусы */
    --danger: #ff4a5a;
    --danger-rgb: 255, 74, 90;
    --danger-hover: #ff6b78;
    /* Предупреждение - не то же, что опасность: «так делать можно, но
       знайте вот что». Красным такое помечать нельзя, он про потерю. */
    --warning: #ff9f0a;
    --warning-rgb: 255, 159, 10;
    --success: #00e676;
    --success-rgb: 0, 230, 118;
    
    /* Эффекты стекла */
    --border-color: rgba(255, 255, 255, 0.07);
    --shadow-color: rgba(0, 0, 0, 0.4);
    
    /* Доп цвета */
    --reply-bg: rgba(255, 255, 255, 0.05);
    --bg-card: rgba(30, 30, 35, 0.5);
    /* Подложка второго плана: системные плашки, мелкие кнопки в списках */
    --bg-secondary: rgba(255, 255, 255, 0.08);

    /* Выбранный чат, реакции, хвостики пузырей */
    --item-active: rgba(var(--accent-rgb), 0.14);
    --reaction-bg: rgba(255, 255, 255, 0.07);
    --reaction-border: rgba(255, 255, 255, 0.14);
    --msg-my-tail: #ff7043;
    /* Полосы поверх переписки: нижнее меню, «ответ на» */
    --bg-bar: rgba(20, 20, 25, 0.85);
    /* Экран звонка тёмный в обеих темах, как во всех мессенджерах; на
       тёмной сквозь него чуть видна переписка, и это красиво */
    --call-overlay-bg: rgba(10, 10, 15, 0.75);
    /* Затемнение под окнами */
    --backdrop: rgba(0, 0, 0, 0.7);
    /* Всплывающее поверх переписки: меню, окна, панели. Почти непрозрачное:
       с фоном боковой панели (0.65) сквозь меню просвечивали фото и текст
       сообщений, а светлое окно над затемнением становилось мутно-серым */
    --bg-popup: rgba(28, 28, 32, 0.92);
}

/* ─── Единая мера оформления ──────────────────────────────
   Одни и те же величины во всём приложении: пока их подбирали на глаз,
   в стилях накопилось восемнадцать разных скруглений и два десятка
   размеров текста, и одинаковые по смыслу вещи выглядели по-разному.

   И на body тоже: тени ниже собраны из цвета тени и акцента, а их светлая
   тема и выбранный цвет оформления меняют на body. Объявленные только на
   :root, тени вычислялись там из тёмной темы - в светлой у пузырей и окон
   была тяжёлая чёрная тень, а свечение кнопок оставалось оранжевым при
   любом цвете оформления. */
:root, body {
    /* Скругления: от мелких отметок до карточек и окон */
    --r-xs: 4px;    /* отметки, полоски прокрутки */
    --r-sm: 8px;    /* мелкие кнопки, поля */
    --r-md: 12px;   /* карточки, пузыри, строки списков */
    --r-lg: 16px;   /* окна и панели */
    --r-xl: 20px;   /* крупные панели, всплывающие меню */
    --r-pill: 999px;/* «таблетки»: счётчики, теги, поле ввода */

    /* Тени по «высоте» над поверхностью. Цвет - из темы, поэтому в
       светлой они лёгкие, а не чёрные, как было у половины из них. */
    --sh-sm: 0 2px 8px var(--shadow-color);    /* строка, кнопка */
    --sh-md: 0 4px 14px var(--shadow-color);   /* карточка */
    --sh-lg: 0 8px 24px var(--shadow-color);   /* панель, меню */
    --sh-xl: 0 12px 40px var(--shadow-color);  /* окно поверх всего */
    /* Свечение акцентом - следует за выбранным цветом */
    --sh-accent: 0 2px 8px rgba(var(--accent-rgb), 0.3);
    --sh-accent-hover: 0 4px 15px rgba(var(--accent-rgb), 0.4);

    /* Размеры текста. Шаг небольшой: в переписке рядом стоят имя,
       текст и время, и резкие перепады сбивают чтение. */
    --fs-xs: 11px;   /* время, служебные пометки */
    --fs-sm: 12px;   /* подписи под названиями */
    --fs-md: 13px;   /* второстепенный текст, кнопки */
    --fs-lg: 14px;   /* основной текст интерфейса */
    --fs-xl: 15px;   /* имена в списке, заголовки строк */
    --fs-2xl: 16px;  /* крупные кнопки, ввод */
    --fs-3xl: 18px;  /* заголовки окон */
    --fs-4xl: 20px;  /* заголовки разделов */
    --fs-5xl: 22px;  /* имя в профиле */
    --fs-6xl: 24px;  /* самые крупные заголовки */

    /* Движение. Быстрое - для откликов на палец, обычное - для
       появлений, медленное - для смены темы и крупных перестроений. */
    --t-fast: 0.15s;
    --t: 0.2s;
    --t-slow: 0.3s;
}

body.light-theme {
    --bg-main: #f5f5f7;
    --bg-sidebar: rgba(255, 255, 255, 0.7);
    --bg-input: rgba(0, 0, 0, 0.05);
    --bg-hover: rgba(0, 0, 0, 0.08);
    
    --accent: #e65100;
    --accent-rgb: 230, 81, 0;
    --accent-hover: #ff6d00;
    
    --msg-my: linear-gradient(135deg, #f57c00 0%, #ff9800 100%);
    --msg-other: rgba(255, 255, 255, 0.8);
    
    --text-main: #1d1d1f;
    --text-muted: #6e6e73;
    
    --danger: #ff3b30;
    --danger-rgb: 255, 59, 48;
    --danger-hover: #ff5c53;
    --warning: #e08600;
    --warning-rgb: 224, 134, 0;
    --success: #34c759;
    --success-rgb: 52, 199, 89;
    
    --border-color: rgba(0, 0, 0, 0.05);
    --shadow-color: rgba(0, 0, 0, 0.08);
    
    --reply-bg: rgba(0, 0, 0, 0.03);
    --bg-card: rgba(255, 255, 255, 0.7);
    --bg-secondary: rgba(0, 0, 0, 0.06);

    --item-active: rgba(var(--accent-rgb), 0.1);
    --reaction-bg: rgba(0, 0, 0, 0.04);
    --reaction-border: rgba(0, 0, 0, 0.12);
    --msg-my-tail: #ff9800;
    --bg-bar: rgba(255, 255, 255, 0.85);
    /* А на светлой полупрозрачный тёмный слой смешивался со светлым
       интерфейсом под ним, и звонок выглядел мутно-серым */
    --call-overlay-bg: rgba(10, 10, 15, 0.94);
    --backdrop: rgba(20, 20, 25, 0.35);
    --bg-popup: rgba(255, 255, 255, 0.94);
}