/*
  Дизайн-токены NiMilex — «чернильная» палитра индивидуального ТЗ (05.08.2026).
  Единственный источник цветовых значений: во всех остальных файлах стилей
  захардкоженных цветов нет.

  Палитра — образ рукописного юридического документа: чернильные фиолетовые
  оттенки (§7.2) и серебряная шкала служебного текста (§7.3). Никакого яркого
  синего. ТЗ описывает прежде всего тёмную тему; светлая выводится как «Graphite
  Mist» с теми же чернилами по смыслу.

  Темы переключаются атрибутом data-theme на <html>: dark | light.
  «system» приложение разворачивает в конкретную тему само.
*/

:root {
  /* ===== §7.2 Чернильная шкала (сырьё, одинаковое в обеих темах) ===== */
  --ink-fresh:   #4B176E;   /* Fresh Ink — прочитано, pressed, ключевой штрих */
  --ink-core:    #542366;   /* Core Ink — основной активный цвет */
  --ink-violet:  #55207A;   /* NiMilex Violet — логотип и фирменный знак */
  --ink-dry:     #603274;   /* Drying Ink — hover, мягкая активность */
  --ink-archive: #75517D;   /* Archive Ink — обычные фиолетовые иконки */
  --ink-faded:   #806985;   /* Faded Ink — слабый архивный штрих */

  /* ===== §7.3 Серебряная шкала ===== */
  --silver:           #F5F9FF;  /* основной светлый текст, точки логотипа */
  --silver-muted:     #C9CED6;  /* нейтральные статусы / и // */
  --silver-secondary: #A7ADB7;  /* вторичный текст, время, размер файла */
  --silver-disabled:  #777E89;  /* неактивные и недоступные элементы */

  /* ===== §7.1 Основная иконка (фирменный знак) ===== */
  --sign-bg:     #05060A;   /* фон иконки */
  --sign-mark:   #55207A;   /* ромбовый контур */
  --sign-dot:    #F5F9FF;   /* три точки */

  --brass: #B79A62;         /* Nimilex Brass — только отметка рабочего чата */
  --danger: #E5484D;
  --online: #7CB08B;        /* «в сети» — спокойный зелёный, без яркого синего */

  /* Полупрозрачные производные акцента (подложки иконок, чипы, выделения) */
  --purple-08: rgba(85, 32, 122, 0.1);
  --purple-12: rgba(85, 32, 122, 0.16);
  --purple-20: rgba(85, 32, 122, 0.26);

  /* --- Геометрия (ТЗ 4.6 §20) --- */
  --r-chip: 999px;
  --r-field: 12px;    /* §20: внутренние строки и контролы — 12px */
  --r-row: 12px;
  --r-bubble: 12px;   /* ТЗ 4.5 §17: радиус основного контейнера сообщения — ровно 12px */
  --r-card: 18px;     /* §20: основные карточки — 18px */
  --r-panel: 24px;

  --gap: 4px;              /* базовый шаг сетки */
  --pad-screen: 16px;      /* горизонтальные поля экрана */
  --avatar-row: 52px;
  --avatar-header: 36px;
  --avatar-profile: 96px;
  --header-h: 56px;
  --tabbar-h: 56px;   /* ТЗ 4.6 §1/§20: нижняя навигационная панель — ровно 56px */
  --profile-extra: 110px;  /* §2: профильная область ниже исходной ровно на 110px */
  --sidebar-w: 264px;
  --list-w: 348px;

  /* --- Движение (ТЗ 4.6 §1: основные переходы — 200 мс, без пружин) --- */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast: 0.14s;
  --dur: 0.2s;

  /* --- Фирменный 48-угольник --- */
  --polygon48: polygon(
    50.00% 0.00%, 56.53% 0.43%, 62.94% 1.70%, 69.13% 3.81%, 75.00% 6.70%,
    80.44% 10.33%, 85.36% 14.64%, 89.67% 19.56%, 93.30% 25.00%, 96.19% 30.87%,
    98.30% 37.06%, 99.57% 43.47%, 100.00% 50.00%, 99.57% 56.53%, 98.30% 62.94%,
    96.19% 69.13%, 93.30% 75.00%, 89.67% 80.44%, 85.36% 85.36%, 80.44% 89.67%,
    75.00% 93.30%, 69.13% 96.19%, 62.94% 98.30%, 56.53% 99.57%, 50.00% 100.00%,
    43.47% 99.57%, 37.06% 98.30%, 30.87% 96.19%, 25.00% 93.30%, 19.56% 89.67%,
    14.64% 85.36%, 10.33% 80.44%, 6.70% 75.00%, 3.81% 69.13%, 1.70% 62.94%,
    0.43% 56.53%, 0.00% 50.00%, 0.43% 43.47%, 1.70% 37.06%, 3.81% 30.87%,
    6.70% 25.00%, 10.33% 19.56%, 14.64% 14.64%, 19.56% 10.33%, 25.00% 6.70%,
    30.87% 3.81%, 37.06% 1.70%, 43.47% 0.43%
  );

  /* --- Аватарный контур: правильный 26-угольник (ТЗ №3 §4). Заменил прежний
     18-угольник; все стороны и внутренние углы математически равны, форма
     масштабируется без искажения. Внутри — обрезка фото и кольцо-метка роли. --- */
  --polygon26: polygon(
    50.00% 0.00%, 61.97% 1.45%, 73.24% 5.73%, 83.16% 12.57%, 91.15% 21.60%,
    96.75% 32.27%, 99.64% 43.97%, 99.64% 56.03%, 96.75% 67.73%, 91.15% 78.40%,
    83.16% 87.43%, 73.24% 94.27%, 61.97% 98.55%, 50.00% 100.00%, 38.03% 98.55%,
    26.76% 94.27%, 16.84% 87.43%, 8.85% 78.40%, 3.25% 67.73%, 0.36% 56.03%,
    0.36% 43.97%, 3.25% 32.27%, 8.85% 21.60%, 16.84% 12.57%, 26.76% 5.73%,
    38.03% 1.45%
  );
  /* Метки ролей: золото — админ, яркий юрис-фиолет — юрист (светлее чернильных
     монограмм, чтобы кольцо было видно). */
  --gold: #C9A227;
  --ring-lawyer: #8E5BD0;

  /* Палитра монограмм — чернильные оттенки */
  --mono-0: #55207A; --mono-1: #663389; --mono-2: #4B176E; --mono-3: #75517D;
  --mono-4: #542366; --mono-5: #3F1A5C; --mono-6: #806985; --mono-7: #603274;
}

/* ==========================================================================
   Светлая тема: Graphite Mist (чернила на светлой бумаге)
   ========================================================================== */
:root, :root[data-theme="light"] {
  /* §16.3 LIGHT: мягкий холодный графит, без чистого белого на больших площадях. */
  --bg-top: #F1F3F5;        /* Canvas */
  --bg-center: #ECEEF1;
  --bg-bottom: #E3E6EA;

  --surface: #F6F7F9;       /* Surface (не чистый белый) */
  --surface-sunken: rgba(23, 26, 32, 0.04);
  --surface-hover: rgba(23, 26, 32, 0.05);   /* ≈ Hover #DDE1E6 поверх поверхности */
  --surface-active: rgba(23, 26, 32, 0.08);

  --text-primary: #171A20;
  --text-secondary: #626A76;
  --text-tertiary: #8A9099;
  --text-on-purple: #FFFFFF;

  --separator: #DDE1E7;

  /* Акцент интерфейса = чернильный фиолетовый (§6.1: обычная защита #55207A,
     активное действие #542366). */
  --purple: #55207A;
  --purple-light: #75517D;
  --purple-active: #542366;

  /* §10 Иконки: default / hover / active / pressed / disabled */
  --icon: #75517D;
  --icon-hover: #603274;
  --icon-active: #542366;
  --icon-pressed: #4B176E;
  --icon-disabled: #A7ADB7;
  /* Текст-акцент (имя отправителя, «печатает…», ссылки) — читаемый чернильный */
  --accent-text: #603274;

  /* §17.1 Штриховые статусы: / и // нейтральные (#C9CED6); прочитано — чернила #4B176E */
  --stroke-sending: var(--silver-muted);
  --stroke-sent: var(--silver-muted);
  --stroke-delivered: var(--silver-muted);
  --stroke-read: #4B176E;
  --stroke-error: var(--danger);

  /* §17.2 Аудиосообщение (LIGHT): контейнер нейтральный, две части волны */
  --audio-container: #ECEDEF;
  --wave-unplayed: #A7ADB7;
  --wave-played: #603274;
  --audio-btn: #55207A;
  --audio-icon: #F5F9FF;
  --audio-time: #626A76;

  /* §8.4 Переключатели */
  --switch-on: #542366;
  --switch-hover: #603274;
  --switch-pressed: #4B176E;
  --switch-off: #C4C8CF;
  --switch-knob: #FFFFFF;
  --switch-knob-off: #FFFFFF;

  /* §16.3 Поверхности сообщений LIGHT: без крупной фиолетовой заливки —
     исходящее нейтрально-графитовое, фиолетовый остаётся только акцентом (§16.5). */
  --bubble-in: #FAFBFC;          /* Incoming */
  --bubble-in-text: var(--text-primary);
  --bubble-out: #ECEDEF;         /* Outgoing — нейтральный, не фиолетовый */
  --bubble-out-text: var(--text-primary);
  --attach-fill: #E3E6EA;        /* Attachment Surface */
  --attach-name: var(--text-primary);
  --attach-meta: var(--silver-secondary);
  --attach-icon: #75517D;
  --attach-icon-hover: #603274;
  --attach-icon-pressed: #542366;

  /* Стекло */
  --glass-fill: rgba(255, 255, 255, 0.48);
  --glass-fill-solid: rgba(246, 247, 249, 0.96);
  --glass-border: rgba(23, 26, 32, 0.08);
  --glass-shadow: 0 8px 32px rgba(32, 38, 46, 0.08);
  --glass-blur: 28px;

  --shadow-row: 0 1px 2px rgba(32, 38, 46, 0.05);
  --shadow-pop: 0 12px 40px rgba(32, 38, 46, 0.16);

  color-scheme: light;
}

/* ==========================================================================
   Тёмная тема — основная в ТЗ. Глубокая чернильная поверхность (§4.5).
   ========================================================================== */
:root[data-theme="dark"] {
  /* §16.2 DARK: глубокий графит + серебряная иерархия, без абсолютного чёрного. */
  --bg-top: #0D0F13;        /* Canvas */
  --bg-center: #111318;
  --bg-bottom: #0A0C10;

  --surface: #14171C;       /* Surface */
  --surface-sunken: rgba(245, 249, 255, 0.05);
  --surface-hover: rgba(245, 249, 255, 0.06);   /* ≈ Hover #303640 поверх поверхности */
  --surface-active: rgba(245, 249, 255, 0.10);

  --text-primary: #F5F9FF;        /* Primary */
  --text-secondary: #C9CED6;      /* §16.2 Secondary */
  --text-tertiary: #A7ADB7;       /* §16.2 Tertiary */
  --text-on-purple: #F5F9FF;

  --separator: rgba(245, 249, 255, 0.07);   /* §3.1 рекомендованный разделитель */

  /* Акцент. На почти-чёрном фоне чернильный фиолетовый для заливок читается со
     светлым текстом; для акцентного ТЕКСТА и иконок берём более светлые чернила
     (Archive/Drying Ink), иначе тёмный фиолетовый сливается с фоном. */
  --purple: #7A3EA3;             /* заливки/акцент, светлый текст поверх */
  --purple-light: #A88BB6;
  --purple-active: #55207A;

  /* §10 Иконки. Тёмная тема требует читаемых чернил: базово чуть светлее
     #75517D, к активному состоянию — насыщеннее. */
  --icon: #9B84A6;
  --icon-hover: #B79AC4;
  --icon-active: #7A3EA3;
  --icon-pressed: #55207A;
  --icon-disabled: #5C616B;
  --accent-text: #B79AC4;

  /* §4.3 Штрихи. Прочитано в тёмной теме — светящиеся чернила (тёмный #4B176E
     на тёмном пузыре не виден): поднимаем яркость, сохраняя чернильный тон. */
  --stroke-sending: var(--silver-muted);
  --stroke-sent: var(--silver-muted);
  --stroke-delivered: var(--silver-muted);
  --stroke-read: #8B5AA4;         /* §17.1 Fresh Ink Dark UI — читаемо на тёмном */
  --stroke-error: var(--danger);

  /* §17.2 Аудиосообщение (DARK) */
  --audio-container: #24212A;
  --wave-unplayed: #A7ADB7;
  --wave-played: #75517D;
  --audio-btn: #55207A;
  --audio-icon: #F5F9FF;
  --audio-time: #A7ADB7;

  /* §8.4 Переключатели */
  --switch-on: #7A3EA3;
  --switch-hover: #8A4CB4;
  --switch-pressed: #55207A;
  --switch-off: #343840;
  --switch-knob: #F5F9FF;
  --switch-knob-off: #A7ADB7;

  /* §16.2 Поверхности сообщений DARK: нейтральный графит, фиолетовый — только
     акцент (§16.5). Исходящее — #24212A с очень слабым тёплым подтоном. */
  --bubble-in: #1A1E24;          /* Incoming */
  --bubble-in-text: var(--text-primary);
  --bubble-out: #24212A;         /* Outgoing — нейтральный графит */
  --bubble-out-text: var(--text-primary);
  --attach-fill: #2A2F37;        /* Attachment Surface */
  --attach-name: #F5F9FF;
  --attach-meta: #A7ADB7;
  --attach-icon: #9B84A6;
  --attach-icon-hover: #B79AC4;
  --attach-icon-pressed: #7A3EA3;

  --glass-fill: rgba(17, 19, 24, 0.62);
  --glass-fill-solid: rgba(15, 17, 21, 0.97);
  --glass-border: rgba(245, 249, 255, 0.08);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);

  --shadow-row: none;
  --shadow-pop: 0 16px 48px rgba(0, 0, 0, 0.62);

  color-scheme: dark;
}