/* Life OS Design System v2 — токены (направление «Спокойный журнал») */
:root{
  /* палитра: семантика.
     Четыре уровня текста выстроены монотонно по контрасту на белом (WCAG AA ≥4.5:1
     для текста, ≥3:1 для иконок и границ контролов):
       --ink 16.9 : --ink-soft 10.4 : --muted 7.6 : --faint 5.2.
     Прежний --faint #94a3b8 давал 2.56:1 — «тихий» текст был нечитаем (UI.CONTRAST.1). */
  --ink:#0f172a; --ink-soft:#334155; --muted:#475569; --faint:#5f6e7e;
  --paper:#f5f6f7; --card:#ffffff; --line:#e6e9ec; --line-strong:#d5dbe0;
  /* --ctrl-line — границы интерактивных контролов (чекбокс, поиск): ≥3:1 на белом */
  --ctrl-line:#7b8894;
  --navy:#101b22; --navy-2:#20313a; --teal:#0f766e; --teal-soft:#e4f4f1; --teal-ink:#0b5750;
  /* --coral / --yellow — МЕТКИ (точки, рамки, фоны), не текст: на белом они дают
     3.98:1 и 2.10:1, то есть ниже AA. Для букв — только *-ink уровни:
     --coral-ink 6.99:1 на белом (5.99 на --coral-soft), --yellow-ink 5.91:1
     (5.36 на --yellow-soft). Это правило ловит tests/regression-ui2.test.js. */
  --coral:#d95438; --coral-strong:#c2482d; --coral-soft:#fbeae5; --coral-ink:#9a3a24;
  --yellow:#e3a92b; --yellow-soft:#fdf3dd; --yellow-ink:#8a5a12;
  --ok:#137034; --ok-soft:#e6f4ec; --danger:#c0392b;
  /* радиусы: единая шкала (6 / 10 / 14, пилюли — 999) */
  --r-s:6px; --r-m:10px; --r-l:14px;
  /* отступы */
  --gap:16px; --gap-s:8px;
  /* тени */
  --shadow-card:0 1px 2px #17252b0d; --shadow-pop:0 10px 30px #172f3814; --shadow-float:0 18px 50px #0003;
  /* типографика */
  --font:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs-eyebrow:10px; --fs-meta:11px; --fs-body:14px; --fs-title:17px; --fs-hero:clamp(28px,3.4vw,40px);
  --fw-body:400; --fw-bold:750; --fw-heavy:850;
  /* анимация */
  --anim:140ms ease; --anim-slow:220ms ease;
  /* шкала z-index (единая) */
  --z-base:0; --z-nav:3; --z-topbar:5; --z-float:20; --z-modal:40;
  /* --- АДАПТИВНАЯ РАСКЛАДКА -----------------------------------------------
     Трёхчастная схема: меню разделов сверху, чат слева (1/3 ширины),
     область контента справа (2/3). Сумма колонок = 100% ширины, пустых
     полей нет; центрирующего max-width нет (страница на всю ширину).
     Фактические брейкпоинты (в media-запросах — литералы, CSS не умеет
     переменные в условиях):
       ≤480px      телефон (чат во всю ширину, меню-sheet, segmented снизу)
       481–1024px  планшет: одна колонка + переключатель «Чат | Раздел»
       ≥1025px     две колонки (чат 1fr : контент 2fr)
     Дробные брейкпоинты (768/850/430) запрещены и ловятся тестом
     tests/layout.test.js. Полный контракт — docs/DESIGN.md. */
  --rail:224px;                    /* устарело: боковой рельс убран, не использовать */
  --gutter:clamp(12px,2vw,56px);   /* боковые отступы шапки и колонок */
  --chat-col:1fr;                  /* чат-колонка = 1/3 (grid 1fr : 2fr) */
  --content-col:2fr;               /* область контента = 2/3 */
  --topbar-h:54px;                 /* высота залипающей шапки */
  --mobilebar-h:62px;              /* высота нижней навигации на мобиле (уточняется из DOM) */
  --chat-top-mobile:120px;         /* от верха вьюпорта до верха чата (≤1024, уточняется из DOM) */
  --chat-top-desktop:118px;        /* резерв под чат на десктопе (dvh) */
  --composer-pad:clamp(8px,1.4vh,16px); /* воздух под последним сообщением */
  --measure:72ch;                  /* мера строки текста ассистента */
  /* --- МАГИЧЕСКИЕ РАЗМЕРЫ (P25) — хардкод 44px/16px в styles.css сведён сюда -- */
  --tap:44px;                      /* минимальный тап-таргет (WCAG) */
  --field-font:16px;               /* шрифт поля ввода: меньше — зум на iOS */
  --bp-mobile:480px;               /* брейкпоинт телефона (media-запросы — ЛИТЕРАЛЫ,
                                      var() в @media невалиден; синхронизируется
                                      с tests/layout.test.js и docs/DESIGN.md) */
  --bp-tablet:1024px;              /* брейкпоинт планшета/двухколоночной раскладки */
}