/* ═══════════════════════════════════════════════════════════════════
   ДИЗАЙН-ТОКЕНЫ «Вспоминаю тебя» — единственный источник правды.
   Подключается ПЕРВЫМ (в base.html до style.css). style.css и memorial.css
   — только потребители этих переменных. Значения токенов менять ТОЛЬКО здесь.

   Живая витрина и правило согласования: /design-system

   Язык (ревью 2026-07-14): ТЕПЛО — нейтрали «бумага/уголь», не голубизна;
   ВОЗДУХ — отделение поверхностей hairline-линиями, внешних drop-теней нет;
   СВЕЧЕНИЕ ВМЕСТО ТЕНИ — «живое» (фото, FAB) отделяется мягким свечением
   в тон живого акцента; глубина — только у настоящих overlay-слоёв.

   Про каскад: токены-литералы (палитра, радиусы) живут на :root. Токены,
   вычисляемые через var() от --a (живой акцент, определён в style.css на
   body), заданы на body — иначе var(--a) резолвился бы в контексте :root,
   где --a ещё нет, и значения стали бы невалидными.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* ── Палитра · светлая тема — «тёплая бумага» ───────────────────── */
  /* Фон страницы обеих тем назван явно: этот же цвет ставит ранний скрипт в
     base.html в <meta name=theme-color> и в фон <html>. Скрипт ЧИТАЕТ токен —
     копий значения в JS больше нет (раньше #f8f6f2/#14110d жили в трёх местах). */
  --bg-light: #f8f6f2;        /* тёплая бумага */
  --bg-dark: #14110d;         /* тёплый уголь */
  --bg: var(--bg-light);      /* фон текущей темы */
  --surface: rgba(255,253,247,.8);   /* матовая поверхность (карточки, панели) */
  --surface-solid: #fffdf9;   /* непрозрачная поверхность (модалки, меню) */
  --text: #2a2620;            /* основной текст — тёплый графит */
  --ink: #2a2620;             /* «чернила» — заголовки, сильный текст, тёмные кнопки */
  /* Обе ступени приглушённого текста держат контраст WCAG AA (≥4.5:1) на
     --bg-light. До 2026-09-05 --faint был #9d968a — 2.72:1: именно им
     набраны подсказки «что делать» и все плейсхолдеры, и для глаза 60+
     это не «бледно», а невидимо. Ступени сохранены (5.97 против 4.56),
     просто обе подняты выше порога. Менять — только с пересчётом. */
  --muted-solid: #635e54;     /* приглушённый текст — 5.97:1 на бумаге */
  --faint: #767061;           /* самый тихий текст, подписи, плейсхолдеры — 4.56:1 */
  --line: #e6e2d9;            /* разделители, границы */
  --line-soft: #efece5;       /* самые мягкие разделители */
  --accent: #6b6357;          /* тёплый графит (ссылки, статичные акценты) */
  --ok: #45795a;              /* успех / одобрение */
  --ok-bg: #eaf0e6;           /* фон-подложка успеха */
  --danger: #a3475a;          /* опасность / удаление / отклонение (тёплое бордо) */
  /* Внимание / на проверке / доработка. У янтаря, в отличие от --ok и --danger,
     текст и заливка — РАЗНЫЕ ступени: заливочный янтарь (--warn-rgb) на светлом
     фоне не даёт мелкому тексту нужного контраста, поэтому --warn темнее. */
  --warn: #9a6b16;            /* текст/иконка состояния «внимание» */
  --warn-bg: #f1ede4;         /* фон-подложка предупреждения/дисклеймера */
  --hidden: #6e6455;          /* «скрыто» / выключенное состояние (тёплый серый) */

  /* ── Семантика · RGB-тройки для тинтов ───────────────────────────
     Состояния (ok/danger/warn/hidden) заливаются той же краской, что и
     текст, но с альфой: rgba(var(--ok-rgb), .14). Тройки — потому что
     альфа у подложки, рамки и ховера разная, а цвет один.              */
  --ok-rgb: 69,121,90;        /* = --ok */
  --danger-rgb: 163,71,90;    /* = --danger */
  --warn-rgb: 196,138,42;     /* = --warn */
  --hidden-rgb: 110,100,85;   /* = --hidden */

  /* Готовые ступени состояний живут на body (см. ниже) — иначе var() от
     троек резолвился бы в контексте :root и тёмная тема их не перекрыла бы. */

  /* ── Скрим · тёплая подложка поверх медиа ────────────────────────
     Один тон на все затемнения (шторка шапки, лайтбокс, кнопки на фото,
     модалка кадрирования) — раньше здесь жили четыре разных «чёрных»,
     один из них холодный (20,22,28) и спорил с тёплым языком.          */
  --scrim-rgb: 20,17,13;
  --on-scrim: #fff;           /* текст/иконки поверх скрима и фото */
  --hero-top-scrim-opacity: .64;
  --hero-extension-blur: 40px;
  --viewbar-clearance: calc(72px + env(safe-area-inset-top));

  /* ── Радиусы ─────────────────────────────────────────────────────
     Шкала-канон. Новые компоненты берут только эти ступени.            */
  --r-xs: 8px;      /* мелкие элементы: превью, тэги */
  --r-sm: 10px;     /* кнопки, малые поля */
  --r-md: 12px;     /* поля ввода, чипы-плашки */
  --r-lg: 14px;     /* карточки, баннеры */
  --r-xl: 18px;     /* крупные панели, модалки */
  --r-pill: 999px;  /* пилюли, круглые чипы, аватары */
  /* legacy --radius:16px удалён: последние потребители (.share/.memory/.mod/
     .person-edit/.pwa-panel) переведены на шкалу, литеральных радиусов в CSS нет. */

  --motion-switch-duration: 360ms;
  --motion-switch-ease: cubic-bezier(.2,.7,.2,1);

  /* ── Управление воспоминанием · компактные иконки ───────────────── */
  --memory-action-size: 36px;
  --memory-action-icon-size: 16px;
  --memory-menu-width: 236px;
  --memory-menu-row: 44px;
  --memory-menu-inset: 8px;
  --memory-menu-neck: 54px;
  --memory-menu-blur: 20px;
  --memory-menu-open-ms: 650;
  --memory-menu-close-ms: 440;
  --memory-reaction-scrim: rgba(var(--scrim-rgb), .5);
  --memory-reaction-scrim-hover: rgba(var(--scrim-rgb), .65);

  /* ── Глубина · только для overlay-слоёв ──────────────────────────
     Внешних drop-теней у карточек/кнопок НЕТ (отделение — hairline).
     --shadow-overlay — для элементов, реально висящих над контентом:
     лайтбокс, меню «⋯», модалка кадрирования, dev-бар. Тёплый тон.      */
  --shadow-overlay: 0 18px 50px rgba(43,34,22,.28);

  /* ── Типографика ─────────────────────────────────────────────────
     Geologica — дисплейный (имена, кикеры, метки, кнопки).
     Commissioner — текстовый (тело, подписи).                          */
  --font-display: "Geologica", system-ui, sans-serif;
  --font-text: "Commissioner", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;   /* код, ID токенов (витрина) */

  /* ── Шкала кегля ──────────────────────────────────────────────────
     Заведена 2026-09-05 под возрастную аудиторию: памятники заводят
     дети 55–70, и до этого размеры расползлись по файлам от 10 до 21px
     литералами. Теперь размер текста берётся ТОЛЬКО отсюда.

     --fs-xs — ПОЛ читаемости, ниже не опускаемся нигде. Всё, что
     раньше было 10–12.5px (подписи под фото, метки, счётчики, чипы),
     поднято до него: на телефоне в 65 лет разница между 11 и 13
     решает, прочитают вообще или нет.                                  */
  --fs-lead: 21px;    /* текст воспоминания, ведущий абзац */
  --fs-body: 18px;    /* тело интерфейса */
  --fs-sm: 15px;      /* подсказки под полем, приглушённые подписи */
  --fs-xs: 13px;      /* пол читаемости: мелкие подписи, чипы, счётчики */

  /* Капс-кикер («ЛИЧНЫЕ КАЧЕСТВА»). Капс с широким трекингом читается
     медленнее всего, поэтому трекинг сведён с .22–.28em к --ls-label:
     разрядка остаётся приёмом, но перестаёт мешать. */
  --fs-label: 13px;
  --fs-memorial-section: 18px;
  --fs-memorial-subsection: 16px;
  --ls-label: .14em;
}

/* ── Живой акцент · заливки и свечения поверх --a ─────────────────────
   --a («R, G, B» с запятыми — так пишет floating-bg.js) определяется в
   style.css на body как var(--halo-rgb, 224, 164, 88). Фоллбэк — тёплый
   янтарь (до старта WebGL и без WebGL); запятые в фоллбэке ОБЯЗАТЕЛЬНЫ,
   иначе rgba(var(--a), .07) невалиден и заливки прозрачные.
   Свечения --glow-* — канон «свечение вместо тени»: мягкий ореол в тон
   живого акцента у фото, FAB и других «живых» поверхностей.             */
body{
  --a-tint: rgba(var(--a, 224, 164, 88), .07);        /* еле-заметная подложка (панель-приглашение) */
  --a-soft: rgba(var(--a, 224, 164, 88), .10);        /* мягкая заливка (вторичный триггер) */
  --a-fill: rgba(var(--a, 224, 164, 88), .14);        /* заливка по умолчанию (чипы, тихие кнопки) */
  --a-fill-strong: rgba(var(--a, 224, 164, 88), .16); /* основная кнопка / действие */
  --a-fill-hover: rgba(var(--a, 224, 164, 88), .24);  /* ховер основного действия */
  --a-line: rgba(var(--a, 224, 164, 88), .22);        /* акцентная граница (стекло-панели) */
  --a-select: rgba(var(--a, 224, 164, 88), .24);      /* выделение текста (::selection) — вместо синего браузерного */
  --glow-sm: 0 2px 18px rgba(var(--a, 224, 164, 88), .12);   /* лёгкое свечение (FAB, мелкое) */
  --glow-md: 0 12px 32px rgba(var(--a, 224, 164, 88), .18);  /* свечение фото/медиа (прежний канон галереи) */

  /* Ступени состояний — здесь же, на body: тройки --ok-rgb/--danger-rgb/…
     перекрываются в body.dark, и var() должен резолвиться уже после этого. */
  --ok-fill: rgba(var(--ok-rgb), .14);
  --danger-fill: rgba(var(--danger-rgb), .14);
  --danger-tint: rgba(var(--danger-rgb), .08);
  --warn-fill: rgba(var(--warn-rgb), .12);
  --warn-line: rgba(var(--warn-rgb), .30);
  --hidden-fill: rgba(var(--hidden-rgb), .10);
}

/* ── Палитра · тёмная тема — «уголь» — ЕДИНСТВЕННОЕ определение ──────
   Класс body.dark ставит ранний скрипт в base.html; живой фон
   (floating-bg.js) сам реагирует на этот класс. Переменные --m-* в
   memorial.css — алиасы на эти же токены, поэтому тема здесь одна.       */
body.dark{
  --bg: var(--bg-dark); --surface: rgba(255,246,232,.06); --surface-solid: #1f1b15;
  /* --faint на угле был #756e62 — 3.73:1, тоже ниже AA (см. светлую тему).
     #877f71 даёт 4.75:1 и остаётся тише --muted-solid (6.91:1). */
  --text: #ece8e1; --ink: #f4f0e9; --muted-solid: #a39c8f; --faint: #877f71;
  --line: rgba(255,244,226,.13); --line-soft: rgba(255,244,226,.07);
  --accent: #c2b8a6; --ok: #7cc08d; --ok-bg: rgba(84,120,70,.22);
  --danger: #e0879c; --warn: #e0c074; --warn-bg: rgba(255,246,232,.05);
  --hidden: #a39c8f;
  --shadow-overlay: 0 18px 50px rgba(0,0,0,.55);
  /* на угле состояния читаются светлее: тройки поднимаем под тёмный фон,
     альфы-ступени (--ok-fill и т.д.) пересчитываются сами через var() */
  --ok-rgb: 124,192,141; --danger-rgb: 224,135,156;
  --warn-rgb: 224,192,116; --hidden-rgb: 163,156,143;
}