/* Токены оформления MVQ — фирменная система веба и PWA (срез 02.09.2026).
 *
 * Одно место, где записаны цвет, размер, плотность, углы, шрифт, тень, значок
 * и скорость. Всё остальное берёт значения отсюда и своих чисел не заводит:
 * иначе светлая тема чинится в двадцати файлах, а девятнадцатый забывают.
 *
 * Характер — графитово-синяя глубина и спокойная бирюза. Фон почти чёрный с
 * синевой, поверхности лежат на нём слоями и отличаются светлотой, а не
 * рамкой. Фирменный акцент один — бирюзовый; тёплый (терракота) — второй и
 * редкий: им отмечают, а не красят. Текст мягкий серо-белый в тёмной теме и
 * графитовый в светлой.
 *
 * Правила, которые здесь нарушать нельзя:
 *
 *  1. В тёмной теме нет чистого белого, в светлой — чистого чёрного и
 *     бумажно-белого. И то и другое режет глаза часами, а лента открыта
 *     часами.
 *  2. Золота нет. Тёплый акцент — терракота, и он второй: если на экране два
 *     цветных предмета, тёплый из них — один.
 *  3. Слой отличается от слоя светлотой, узор от поверхности — не больше чем
 *     на 1–2 %. Рамка вокруг каждого предмета — не наш способ.
 *  4. Каждая пара «текст на подложке» посчитана на контраст в обеих темах:
 *     обычный текст ≥ 4,5, знаки и акценты ≥ 3,0 (`scripts/check-ui-contrast.py`
 *     читает первый блок корня и первый блок явной светлой темы; значения
 *     там обязаны быть числами, а не ссылками — и порядок блоков менять нельзя).
 *  5. Полосы прокрутки не видно, но крутится всё: колесо, тачпад, палец,
 *     клавиатура и перетаскивание.
 *
 * # Как устроено
 *
 *   ┌ шрифт                    @font-face, --font
 *   ├ каркас и сетка           --rail --nav --side --feed, --s1…--s6
 *   ├ углы, кегль, зоны, ритм  --r-*, --fs-*, --fw-*, --lh-*, --tap, --fast…
 *   ├ значки                   --ic-*, --ic-stroke-*
 *   ├ ТЁМНАЯ ТЕМА (по умолчанию) — числа
 *   ├ СВЕТЛАЯ ТЕМА — числа, дважды: явная и «как в системе»
 *   ├ производные состояния    --hover --press --focus-* --e1…--e3 (из темы)
 *   ├ тканый мотив             --weave
 *   ├ оттенки акцента, плотность, углы, размер текста — выбор человека
 *   └ просьба двигаться меньше
 *
 * Имена, которые были до этого среза (`--bg`, `--surface`, `--surface2`,
 * `--muted`, `--line`, `--accent*`, `--good/--warn/--bad`, `--mine/--theirs`,
 * `--rail-*`, `--pattern-ink*`, `--brand-arc`), сохранены все: их читают
 * двадцать файлов стилей и не одна строка JS. Новые имена добавлены рядом и
 * ни одно старое не переименовано. */

/* ── Шрифт ───────────────────────────────────────────────────────────────────
 * Onest лежит рядом с окном и никуда не ходит: страница не делает ни одного
 * внешнего запроса, и это её главное свойство, а не мелочь оформления.
 * Подмножества — кириллица, латиница и их расширения: русский, румынский и
 * английский равноправны. */
@font-face {
  font-family: Onest;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../font/onest-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: Onest;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../font/onest-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: Onest;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../font/onest-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: Onest;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../font/onest-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* ═══ Размеры, ритм, буквы — одинаковы в обеих темах ═══════════════════════ */
:root {
  --font: Onest, Inter, system-ui, "Segoe UI Variable Text", "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --mono: var(--font-mono);   /* короткое имя: его уже читает один из файлов стилей */

  /* ── Размеры каркаса ───────────────────────────────────────────────────── */
  --rail: 68px;              /* полоса пространств и папок, во всю высоту */
  --list: 336px;             /* список чатов, ширина постоянная */
  --info: 320px;             /* панель сведений справа (ширина, не цвет!) */
  --head: 64px;              /* высота шапок */
  --nav: 260px;              /* левая навигация ОКНА программы */

  /* ⚠️ Ширины каркаса **сайта** выписаны отдельными именами, и это не
   * многословность.
   *
   * `tokens.css` читают обе поверхности: и `web.html` (сайт), и `index.html`
   * (окно программы). А из четырёх имён выше сайт не пользуется ни одним:
   * `--nav` стоит только в `app.css`, то есть в окне; сетку сайта держит
   * `shell.css` через `--rail-w`. Поставить сюда 236 «для сайта» значило бы
   * сдвинуть левую колонку **окна** с 260 на 236 и не поменять на сайте
   * ровно ничего — правка мимо цели и по чужому продукту.
   *
   * Числа брифа (220–240 / 288–320 / 680–760) живут в именах с `-site`, и
   * читают их только файлы сайта. Окно остаётся ровно таким, каким было. */
  --nav-site: 236px;         /* левая навигация сайта: значок и подпись */
  --nav-narrow: 76px;        /* она же, свёрнутая до полосы значков */
  --side-site: 304px;        /* правая контекстная колонка сайта */
  --side: 320px;             /* правая контекстная колонка ОКНА */
  --feed: 700px;             /* ширина ленты: длина строки, а не ширина окна */
  --feed-site: 720px;        /* лента сайта */
  --feed-wide: 760px;        /* лента сайта при скрытых колонках: строка не длиннее 80 знаков */

  /* ── Сетка отступов: 8 с промежуточными 4 ──────────────────────────────── */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --space: var(--s3);
  --row: 68px;
  --scale: 1;

  /* ── Плотность: три числа, которые едут вместе с --space ──────────────────
   * Поле карточки, зазор между карточками в стопке, зазор между строками
   * внутри карточки. Выбор «компактно / уютно / просторно» ниже меняет только
   * их — и не трогает высоту кнопок и зон нажатия. */
  --pad-card: 16px;
  --gap-stack: 12px;
  --gap-row: 8px;

  /* ── Углы: поля и кнопки 12, карточки 16, крупные листы 20 ─────────────── */
  --radius: 12px;            /* поля, кнопки — основной радиус */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;              /* карточки */
  --r-xl: 20px;              /* крупные мобильные листы */
  --r-pill: 999px;           /* метка, счётчик, капсула */
  --r-card: var(--r-lg);
  --r-sheet: var(--r-xl);
  --r-tile: var(--r-md);     /* снимок внутри карточки: на ступень меньше карточки */

  /* ── Размер текста ─────────────────────────────────────────────────────── */
  --fs-xs: calc(12px * var(--scale));
  --fs-sm: calc(13px * var(--scale));
  --fs: calc(15px * var(--scale));
  --fs-md: calc(17px * var(--scale));
  --fs-lg: calc(21px * var(--scale));
  --fs-xl: calc(27px * var(--scale));
  --fs-xxl: calc(34px * var(--scale));

  /* ── Вес и посадка ──────────────────────────────────────────────────────
   * Onest — переменный, и между 400 и 700 есть промежуточные веса. Текст
   * набран на 450 (чуть плотнее книжного: экран тоньше бумаги), акцентное
   * слово — 550, кнопка — 620, заголовок — 680: тяжелее полужирного текста,
   * легче «жирного». Заголовки посажены плотнее (-.02em); строчный текст —
   * никогда: ему плотность вредит. */
  --fw-body: 450;
  --fw-medium: 550;
  --fw-strong: 620;
  --fw-head: 680;
  --fw-bold: 700;
  --lh-tight: 1.18;          /* заголовки */
  --lh-snug: 1.3;            /* подписи, метаданные */
  --lh: 1.45;                /* интерфейс */
  --lh-loose: 1.55;          /* длинный текст записи */
  --ls-head: -.02em;
  --ls-caps: .07em;          /* прописные вразрядку — только ярлыки полок */

  /* ── Зоны нажатия ──────────────────────────────────────────────────────── */
  --tap: 40px;               /* компьютер */
  --tap-touch: 48px;         /* палец */
  --disabled: .45;           /* прозрачность недоступного */

  /* ── Значки: клетка 24, три размера, толщина против размера ───────────────
   * Один набор (`js/icons.js`), контур 1,7 на клетке 24. Мелкому чуть
   * добавить толщины, крупному чуть снять — иначе в ряду мелкий бледнеет, а
   * крупный грубеет. Разница в десятые доли, заметна только в ряду. */
  --ic-sm: 16px;
  --ic: 20px;
  --ic-lg: 24px;
  --ic-xl: 32px;
  --ic-stroke-sm: 1.9;
  --ic-stroke: 1.75;
  --ic-stroke-lg: 1.6;

  --bubble: 62%;

  /* ── Движение ──────────────────────────────────────────────────────────────
   * Микроотклик 120–160, смена состояния 180–220, открытие экрана до 280. */
  --ease: cubic-bezier(.25, .8, .3, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --fast: 140ms;
  --mid: 200ms;
  --slow: 260ms;

  /* ── Обводка фокуса: толщина и отступ одни на весь продукт ──────────────── */
  --focus-w: 2px;
  --focus-off: 2px;

  /* ═══ ТЁМНАЯ ТЕМА — по умолчанию ══════════════════════════════════════════
   * Тёплый графит: нейтральная глубина без синевы, акцент — вечерний синий, вторая ось — янтарь. Слои: фон → карточка → приподнятое → всплывшее.
   * Каждый следующий светлее предыдущего на 3–4 % светлоты, без рамок.
   *
   * Контраст (худшие пары): текст на всплывшем 11,9; вторичный на всплывшем
   * 5,4; третичный на карточке 3,4; акцент на приподнятом 7,3. */
  color-scheme: dark;
  --bg: #111417;             /* холст */
  --surface: #181C20;        /* карточка, панель */
  --surface2: #1F2429;       /* приподнятое: наведение, вложенная плашка, поле */
  --surface3: #262C32;       /* всплывшее: меню, подсказка, лист */
  --surface-muted: #14181B;  /* утопленное: подложка полки, фон снимка */
  --field: #14181B;
  --text: #ECEAE4;
  --muted: #A3A7AC;          /* вторичный: подписи, время, счётчики */
  --faint: #7C8187;          /* третичный: подсказка в поле, недоступное, ярлык */
  --line: #262B31;           /* волосяная линия: разделитель строк */
  --line-strong: #363C43;    /* граница кнопки и поля */
  --mine: #1E2A3F;           /* своё сообщение: тёплая зелень к синему фону */
  --theirs: #1C2126;         /* чужое сообщение */
  --selected: #222932;
  --veil: rgba(6, 8, 10, .66);
  --shade: 0 24px 70px rgba(0, 0, 0, .5);
  --lift: 0 1px 2px rgba(0, 0, 0, .28);

  /* Синий вечер. В тёмной теме светлее и служит и заливкой, и текстом ссылки
   * (8,9 к фону). Мягкая плашка — для «выбрано» в навигации и на полках. */
  --accent: #8AA8FF;
  --accent-hover: #A0B8FF;
  --accent-active: #7494F2;
  --accentText: #0B1220;
  --accent-soft: #1E2A45;
  --accent-soft-hover: #26345A;
  --accent-soft-ink: #B7C7FF;

  /* Тёплый второй акцент — янтарь. Редко: отметка «живой эфир», MVQ+,
   * одна метка на экране. Не золото. */
  --warm: #E8A15A;
  --warm-soft: #3A2C1C;
  --warm-ink: #F2BE7E;

  /* Состояния. Мягкие плашки для полос и карточек-уведомлений, чернила для
   * текста на них. Сами `--good/--warn/--bad` — для знака и короткой подписи. */
  --good: #86C58F;
  --good-soft: #1C3225;
  --good-ink: #ACDDB3;
  --warn: #E4B95E;
  --warn-soft: #3A2F17;
  --warn-ink: #F0CC84;
  --bad: #EE7C86;
  --bad-soft: #3E2226;
  --bad-ink: #F5A6AD;

  /* Полоса пространств мессенджера темнее всего окна в обеих темах: это
   * граница продукта, а не ещё одна панель. */
  --rail-bg: #0D1013;
  --rail-ink: #8A9099;
  --rail-ink-on: #ECEAE4;
  --pattern-ink: rgba(236, 234, 228, .014);
  --pattern-ink-strong: rgba(236, 234, 228, .10);
  /* Древо на брендовой панели входа. Панель тёмная в обеих темах,
   * поэтому значение одно; задание просит 8–12 %. */
  --brand-pattern-ink: rgba(240, 244, 245, .105);
  /* Вторая траектория знака: янтарь заката к синему вечеру. */
  --brand-arc: #E0A24A;

  /* Тень: в тёмной теме — темнота под предметом, верхняя грань чуть светлее. */
  --shade-rgb: 0 0 0;
  --edge: rgb(255 255 255 / .045);
  --overlay-ink: 236 234 228;   /* цвет «затемнения текстом»: наведение, нажатие */
}

/* ═══ СВЕТЛАЯ ТЕМА ═══════════════════════════════════════════════════════════
 * Та же иерархия слоёв, свои числа. Тёплый белый (05.09.2026: известняк и бирюза сняты — «уютно и без кринжа») (`docs/
 * MVQ-FINAL-DESIGN-2027/01,03`), тот же, что у капсулы в `alpha2.css`; холодный
 * серый графит 02.09 на телефоне читался казённо — замер кадром 03.09.
 *
 * Контраст (худшие пары): текст на приподнятом 13,4; вторичный на
 * приподнятом 5,1; третичный на карточке 3,6; акцент на приподнятом 5,2.
 *
 * ⚠️ Блок выписан дважды — здесь и ниже в `@media (prefers-color-scheme:
 * light)` для темы «как в системе». Не потому, что забыли свести: у CSS нет
 * способа сказать «этот же набор при том или ином условии» без вложенности,
 * которую ещё не все браузеры понимают. Оба блока обязаны совпадать построчно;
 * расхождение ловится сравнением, а не глазами. */
:root[data-look-theme="light"] {
  color-scheme: light;
  --bg: #F7F6F3;
  --surface: #FFFFFF;
  --surface2: #F0EEEA;
  --surface3: #FFFFFF;
  --surface-muted: #F2F1ED;
  --field: #F3F2EE;
  --text: #1B1D22;
  --muted: #62676E;
  --faint: #82878E;
  --line: #E8E5DF;
  --line-strong: #CFCAC1;
  --mine: #E6ECFF;
  --theirs: #FFFFFF;
  --selected: #ECEAE4;
  --veil: rgba(20, 22, 26, .42);
  --shade: 0 20px 55px rgba(20, 22, 26, .16);
  --lift: 0 1px 2px rgba(20, 22, 26, .07);
  --accent: #3056C9;
  --accent-hover: #2949AE;
  --accent-active: #233E96;
  --accentText: #FFFFFF;
  --accent-soft: #E4EBFF;
  --accent-soft-hover: #D6E0FF;
  --accent-soft-ink: #233E96;
  --warm: #B5651D;
  --warm-soft: #FBEBDC;
  --warm-ink: #8F4E14;
  --good: #2F7A46;
  --good-soft: #E1F1E5;
  --good-ink: #25613A;
  --warn: #9A6706;
  --warn-soft: #FBF0D6;
  --warn-ink: #7B5205;
  --bad: #C0303F;
  --bad-soft: #FBE3E5;
  --bad-ink: #97242F;
  --rail-bg: #15181D;
  --rail-ink: #9AA1AA;
  --rail-ink-on: #F5F4F1;
  --pattern-ink: rgba(20, 22, 26, .010);
  --pattern-ink-strong: rgba(20, 22, 26, .085);
  --brand-pattern-ink: rgba(240, 244, 245, .105);
  --brand-arc: #C98A2E;
  --shade-rgb: 20 22 26;
  --edge: rgb(255 255 255 / .70);
  --overlay-ink: 20 22 26;
}

@media (prefers-color-scheme: light) {
  :root[data-look-theme="system"] {
    color-scheme: light;
    --bg: #F7F6F3;
    --surface: #FFFFFF;
    --surface2: #F0EEEA;
    --surface3: #FFFFFF;
    --surface-muted: #F2F1ED;
    --field: #F3F2EE;
    --text: #1B1D22;
    --muted: #62676E;
    --faint: #82878E;
    --line: #E8E5DF;
    --line-strong: #CFCAC1;
    --mine: #E6ECFF;
    --theirs: #FFFFFF;
    --selected: #ECEAE4;
    --veil: rgba(20, 22, 26, .42);
    --shade: 0 20px 55px rgba(20, 22, 26, .16);
    --lift: 0 1px 2px rgba(20, 22, 26, .07);
    --accent: #3056C9;
    --accent-hover: #2949AE;
    --accent-active: #233E96;
    --accentText: #FFFFFF;
    --accent-soft: #E4EBFF;
    --accent-soft-hover: #D6E0FF;
    --accent-soft-ink: #233E96;
    --warm: #B5651D;
    --warm-soft: #FBEBDC;
    --warm-ink: #8F4E14;
    --good: #2F7A46;
    --good-soft: #E1F1E5;
    --good-ink: #25613A;
    --warn: #9A6706;
    --warn-soft: #FBF0D6;
    --warn-ink: #7B5205;
    --bad: #C0303F;
    --bad-soft: #FBE3E5;
    --bad-ink: #97242F;
    --rail-bg: #15181D;
    --rail-ink: #9AA1AA;
    --rail-ink-on: #F5F4F1;
    --pattern-ink: rgba(20, 22, 26, .010);
    --pattern-ink-strong: rgba(20, 22, 26, .085);
    --brand-pattern-ink: rgba(240, 244, 245, .105);
    --brand-arc: #C98A2E;
    --shade-rgb: 20 22 26;
    --edge: rgb(255 255 255 / .70);
    --overlay-ink: 20 22 26;
  }
}

/* ═══ Производные: состояния, тени, связи — считаются из темы ═══════════════
 *
 * Здесь ни одного числа цвета. Всё ниже верно в обеих темах и при любом
 * оттенке акцента само собой — потому и лежит в одном блоке, а не в трёх.
 *
 * Состояния предмета: покой → наведение → нажатие → выбрано → фокус.
 *   наведение   `--hover`        лёгкая пелена цветом текста (6 %)
 *   нажатие     `--press`        та же пелена вдвое плотнее (11 %)
 *   выбрано     `--active-bg`    мягкая плашка акцента + чернила `--active-ink`
 *               `--active-bar`   полоса-метка у выбранного пункта навигации
 *   фокус       `--focus`        обводка акцентом + ореол `--focus-halo`
 * Пелена, а не готовый цвет: она одинаково честна на карточке, на фоне и на
 * всплывшем меню, и не требует трёх токенов на каждый слой. */
:root {
  --hover: rgb(var(--overlay-ink) / .06);
  --press: rgb(var(--overlay-ink) / .11);
  --hover-accent: color-mix(in srgb, var(--accent) 12%, transparent);
  --press-accent: color-mix(in srgb, var(--accent) 20%, transparent);
  --active-bg: var(--accent-soft);
  --active-bg-hover: var(--accent-soft-hover);
  --active-ink: var(--accent-soft-ink);
  --active-bar: var(--accent);
  --focus: var(--accent);
  --focus-halo: color-mix(in srgb, var(--accent) 22%, transparent);
  --link: var(--accent-soft-ink);
  --link-hover: var(--accent);

  /* Линия акцентом: обводка выбранной фишки, кольцо поля в фокусе. */
  --accent-line: color-mix(in srgb, var(--accent) 34%, transparent);
  /* Волосяная линия из текста: внутренняя обводка снимка и значка человека. */
  --hairline: rgb(var(--overlay-ink) / .09);

  /* Смысловые имена состояний — те же токены, сказанные по-английски: так
   * их зовут в бриф-документах и так их ждёт человек, пришедший со стороны. */
  --success: var(--good);
  --success-soft: var(--good-soft);
  --success-ink: var(--good-ink);
  --warning: var(--warn);
  --warning-soft: var(--warn-soft);
  --warning-ink: var(--warn-ink);
  --error: var(--bad);
  --error-soft: var(--bad-soft);
  --error-ink: var(--bad-ink);

  /* Три высоты. Тень в тёмной теме — темнота под предметом; в светлой —
   * мягкое пятно рассеянного света. Это разные вещи, а не одна с разной
   * силой, поэтому плотность тени привязана к теме через `--shade-a*`. */
  --shade-a1: .30; --shade-a2: .34; --shade-a3: .44;
  --e1: 0 1px 2px rgb(var(--shade-rgb) / var(--shade-a1));
  --e2: 0 4px 16px rgb(var(--shade-rgb) / var(--shade-a2));
  --e3: 0 12px 36px rgb(var(--shade-rgb) / var(--shade-a3));
  --halo: color-mix(in srgb, var(--accent) 20%, transparent);
}
:root[data-look-theme="light"] { --shade-a1: .06; --shade-a2: .08; --shade-a3: .12; }
@media (prefers-color-scheme: light) {
  :root[data-look-theme="system"] { --shade-a1: .06; --shade-a2: .08; --shade-a3: .12; }
}

/* ── Молдавский мотив ────────────────────────────────────────────────
 * `Pomul vieții` — древо жизни: центральный ствол, три яруса плавных ветвей с
 * листьями, веер кроны и корни. Вспомогательная иллюстрация, **не** второй
 * логотип: знак MVQ — отдельный объект со своей геометрией.
 *
 * Всё на кубических кривых, и резкость держится не сеткой, а тем, что в
 * рисунке нет деталей тоньше пикселя: двоится и бледнеет на 125 % именно
 * волосяная линия, а сглаженная граница толстой фигуры остаётся сглаженной.
 *
 * Один источник геометрии — `scripts/pomul-gen.py`; он же кладёт те же контуры
 * в `android/.../res/drawable/pomul_*.xml`.
 *
 * Три размера и разные роли:
 *   • `pomul-brand.svg` — крупная одиночная иллюстрация на брендовой
 *     поверхности (левая половина двери), не повторяется, контраст 8–12 %;
 *   • `pomul-micro.svg` — редкая бесшовная плитка в фоне переписки,
 *     контраст 0,8–1,5 %;
 *   • `pomul-icon.svg` — тот же силуэт для 24–32 px.
 *
 * Под полями ввода, длинным текстом и карточками узора нет вовсе: там он
 * мешает читать, а читать — это и есть работа продукта.
 *
 * ⚠️ Прозрачность узора в темах РАЗНАЯ и подобрана по замеру живого кадра.
 * У тёмного фона та же добавка света даёт куда больший видимый скачок, чем у
 * светлого: возле чёрного шкала сжата, возле белого растянута.
 *
 * Рисуется маской, а не картинкой: цвет берётся из темы, и один файл работает
 * в обеих. */
.woven { position: relative; }
.woven::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-color: var(--pattern-ink);
  -webkit-mask-image: var(--weave);
  mask-image: var(--weave);
  -webkit-mask-size: var(--weave-size) var(--weave-size);
  mask-size: var(--weave-size) var(--weave-size);
}
.woven.deep::before { background-color: var(--pattern-ink-strong); }

:root {
  /* Микромотив — та же геометрия, что у крупной иллюстрации, только
   * веточка вместо целого древа. Файл-источник: pattern/pomul-micro.svg,
   * пересобирается scripts/pomul-gen.py. Здесь он встроен строкой, чтобы
   * фон переписки не ждал второго запроса к диску. */
  --weave: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22128%22 height=%22128%22 viewBox=%220 0 128 128%22 fill=%22%23000%22 role=%22presentation%22 aria-hidden=%22true%22%3E%3Cpath d=%22M30.5 24C30.5 33 30.24 39 29.4 54L34.6 54C33.76 39 33.5 33 33.5 24Z%22/%3E%3Cpath d=%22M30.8 40.1C26 32.66 20.24 30.24 14.8 30C20.88 36.96 26.64 42.57 30.8 43.9Z%22/%3E%3Cpath d=%22M21 34C21.07 30.05 16.87 28.9 14.73 29.03C15.1 31.14 17.17 34.97 21 34Z%22/%3E%3Cpath d=%22M33.2 40.1C38 32.66 43.76 30.24 49.2 30C43.12 36.96 37.36 42.57 33.2 43.9Z%22/%3E%3Cpath d=%22M43 34C46.83 34.97 48.9 31.14 49.27 29.03C47.13 28.9 42.93 30.05 43 34Z%22/%3E%3Cpath d=%22M32 22C34.63 19.38 33.2 15.01 32 13.26C30.8 15.01 29.37 19.38 32 22Z%22/%3E%3Cpath d=%22M32 22.38C32.53 19.34 29.46 17.1 27.8 16.5C27.83 18.26 28.96 21.89 32 22.38Z%22/%3E%3Cpath d=%22M32 24.28C31.31 22.16 28.68 22.01 27.47 22.31C28.07 23.4 29.98 25.22 32 24.28Z%22/%3E%3Cpath d=%22M32 22.38C35.04 21.89 36.17 18.26 36.2 16.5C34.54 17.1 31.47 19.34 32 22.38Z%22/%3E%3Cpath d=%22M32 24.28C34.02 25.22 35.93 23.4 36.53 22.31C35.32 22.01 32.69 22.16 32 24.28Z%22/%3E%3Cpath d=%22M94.5 88C94.5 97 94.24 103 93.4 118L98.6 118C97.76 103 97.5 97 97.5 88Z%22/%3E%3Cpath d=%22M94.8 104.1C99.6 96.66 105.36 94.24 110.8 94C104.72 100.96 98.96 106.57 94.8 107.9Z%22/%3E%3Cpath d=%22M107 98C110.83 98.97 112.9 95.14 113.27 93.03C111.13 92.9 106.93 94.05 107 98Z%22/%3E%3Cpath d=%22M97.2 104.1C92.4 96.66 86.64 94.24 81.2 94C87.28 100.96 93.04 106.57 97.2 107.9Z%22/%3E%3Cpath d=%22M85 98C85.07 94.05 80.87 92.9 78.73 93.03C79.1 95.14 81.17 98.97 85 98Z%22/%3E%3Cpath d=%22M96 86C98.63 83.38 97.2 79.01 96 77.26C94.8 79.01 93.37 83.38 96 86Z%22/%3E%3Cpath d=%22M96 86.38C96.53 83.34 93.46 81.1 91.8 80.5C91.83 82.26 92.96 85.89 96 86.38Z%22/%3E%3Cpath d=%22M96 88.28C95.31 86.16 92.68 86.01 91.47 86.31C92.07 87.4 93.98 89.22 96 88.28Z%22/%3E%3Cpath d=%22M96 86.38C99.04 85.89 100.17 82.26 100.2 80.5C98.54 81.1 95.47 83.34 96 86.38Z%22/%3E%3Cpath d=%22M96 88.28C98.02 89.22 99.93 87.4 100.53 86.31C99.32 86.01 96.69 86.16 96 88.28Z%22/%3E%3C/svg%3E");
  --weave-size: 128px;
}

/* ── Оттенок акцента ─────────────────────────────────────────────────────────
 * Четыре спокойных цвета. Бирюза («sea») — своя и по умолчанию; остальные три
 * остаются выбором человека. Золота среди них нет и не будет: золото в рабочем
 * окне читается как реклама, а рекламы здесь не бывает.
 *
 * Каждый оттенок — два набора по семь чисел: для тёмной темы и для светлой.
 * Светлый набор назначается и явной светлой теме, и «как в системе» при
 * светлой системе: до этого среза второго случая не было, и человек с
 * системной светлой темой и «лесным» акцентом получал тёмно-зелёные плашки
 * на светлом.
 *
 * ⚠️ Селекторы начинаются с `html:root`, а не `:root`, и это не описка.
 * `alpha2.css` переопределяет `--accent` своими числами на
 * `:root[data-look-theme="dark"]` (0,2,0) и в `@media` для «как в системе» —
 * с той же силой, что `:root[data-look-accent="…"]`, и позже по порядку
 * файлов, то есть выигрывает: выбранный оттенок в тёмной теме молча
 * оставался бирюзой. `html:root` даёт (0,2,1) и возвращает выбор человеку.
 * Когда блок акцента в `alpha2.css` снимут (его числа теперь равны этим),
 * `html:` можно убрать. */
html:root[data-look-accent="forest"] { --accent: #7FB889; --accent-hover: #95C79E; --accent-active: #6AA874; --accentText: #0B1710; --accent-soft: #1C2E22; --accent-soft-hover: #22392A; --accent-soft-ink: #BDDCC3; }
html:root[data-look-accent="lilac"]  { --accent: #AFA3E6; --accent-hover: #BFB5EC; --accent-active: #9C8FDC; --accentText: #12101C; --accent-soft: #28243C; --accent-soft-hover: #302B48; --accent-soft-ink: #D3CCF2; }
html:root[data-look-accent="clay"]   { --accent: #D69684; --accent-hover: #E0A897; --accent-active: #C98572; --accentText: #1C1210; --accent-soft: #37241E; --accent-soft-hover: #432C25; --accent-soft-ink: #EAC3B8; }
html:root[data-look-theme="light"][data-look-accent="forest"] { --accent: #2F6B3B; --accent-hover: #3A7F48; --accent-active: #275A31; --accentText: #FFFFFF; --accent-soft: #DFEDE1; --accent-soft-hover: #D2E5D5; --accent-soft-ink: #2A5A34; }
html:root[data-look-theme="light"][data-look-accent="lilac"]  { --accent: #5A4E9A; --accent-hover: #6A5EAE; --accent-active: #4C4185; --accentText: #FFFFFF; --accent-soft: #E8E5F3; --accent-soft-hover: #DDD9EE; --accent-soft-ink: #4A3F86; }
html:root[data-look-theme="light"][data-look-accent="clay"]   { --accent: #9A4F3B; --accent-hover: #AE5D48; --accent-active: #844231; --accentText: #FFFFFF; --accent-soft: #F3E4DF; --accent-soft-hover: #ECD8D1; --accent-soft-ink: #7E3F2E; }
@media (prefers-color-scheme: light) {
  html:root[data-look-theme="system"][data-look-accent="forest"] { --accent: #2F6B3B; --accent-hover: #3A7F48; --accent-active: #275A31; --accentText: #FFFFFF; --accent-soft: #DFEDE1; --accent-soft-hover: #D2E5D5; --accent-soft-ink: #2A5A34; }
  html:root[data-look-theme="system"][data-look-accent="lilac"]  { --accent: #5A4E9A; --accent-hover: #6A5EAE; --accent-active: #4C4185; --accentText: #FFFFFF; --accent-soft: #E8E5F3; --accent-soft-hover: #DDD9EE; --accent-soft-ink: #4A3F86; }
  html:root[data-look-theme="system"][data-look-accent="clay"]   { --accent: #9A4F3B; --accent-hover: #AE5D48; --accent-active: #844231; --accentText: #FFFFFF; --accent-soft: #F3E4DF; --accent-soft-hover: #ECD8D1; --accent-soft-ink: #7E3F2E; }
}

/* ── Плотность ───────────────────────────────────────────────────────────── */
:root[data-look-density="compact"]  { --space: var(--s2); --row: 60px; --pad-card: 12px; --gap-stack: 8px;  --gap-row: 4px; }
:root[data-look-density="cosy"]     { --space: var(--s3); --row: 68px; --pad-card: 16px; --gap-stack: 12px; --gap-row: 8px; }
:root[data-look-density="spacious"] { --space: var(--s4); --row: 76px; --pad-card: 20px; --gap-stack: 16px; --gap-row: 12px; }

/* ── Углы ────────────────────────────────────────────────────────────────── */
/*
 * Пять ступеней, и все пять обязаны ехать вместе: у выбравшего острые углы
 * карточка на 6 и вложенный в неё снимок на 12 — это скругление внутри
 * круглее скругления снаружи, и видно это ровно там, где смотрят.
 */
:root[data-look-corners="sharp"]  { --radius: 6px;  --r-sm: 4px;  --r-md: 6px;  --r-lg: 8px;  --r-xl: 10px; }
:root[data-look-corners="soft"]   { --radius: 12px; --r-sm: 8px;  --r-md: 12px; --r-lg: 16px; --r-xl: 20px; }
:root[data-look-corners="round"]  { --radius: 18px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; }

/* ── Размер текста ───────────────────────────────────────────────────────── */
:root[data-look-scale="s"]  { --scale: .92; }
:root[data-look-scale="m"]  { --scale: 1; }
:root[data-look-scale="l"]  { --scale: 1.12; }
:root[data-look-scale="xl"] { --scale: 1.26; }

/* Человек попросил систему двигаться меньше — двигаемся меньше. Это не
 * пожелание оформления, а настройка доступности. */
@media (prefers-reduced-motion: reduce) {
  :root { --fast: .01ms; --mid: .01ms; --slow: .01ms; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}