/*
 * Antygram — токены дизайн-системы (кит 0.3.1, 24.10.2026; кит 0.3 — 22.10.2026)
 * Источник: Antygram UI Kit 0.3.dc.html — §02 Цвет, §03 Типографика, §04 Отступы, §05 Форма, §06 Движение, §25 Токены.
 * 0.3.1 — улучшения по замеру и стандартам (docs/70 §5, решение docs/decisions/2026-10-24-kit-031.md):
 * серый 4.5 : 1, кегли в rem, цель указателя 28, радиусы без 16 и 20, поверхность колонок, черт нет
 * (docs/decisions/2026-10-24-wave-vid.md). Где HTML кита расходится с этим файлом — действует этот файл.
 * Правило: значение вне этих шкал — ошибка макета, а не новый токен.
 */

:root {
  /* ── Цвет · светлая тема ───────────────────────────── */
  --paper: #F2F2F2;            /* фон, лента */
  --side: #FAFAFA;             /* колонки списка и панели (0.3.1): светлее ленты — колонки различает поверхность, а не черта */
  --ink: #171717;              /* текст, главная кнопка */
  --muted: #666664;            /* подписи, состояние словом (0.3.1: было #8C8C8A — 3.01 : 1, стало 5.14) */
  --faint: #ABABA9;            /* выключенное, «/» и «—» — не текст, который читают */
  --onInk: #F2F2F0;            /* текст на чернилах */
  --line: rgba(23,23,23,.12);  /* контур всплывающего слоя, дорожка тумблера и полосы хода; разделителей нет (0.3.1) */
  --line2: rgba(23,23,23,.24); /* рамка поля и вторичной кнопки */
  --line3: rgba(23,23,23,.32); /* подложка под окном */
  --fill1: rgba(23,23,23,.05); /* окно ленты, своя речь, карточка, выбранное, наведение */
  --fill2: rgba(23,23,23,.06); /* выключенная кнопка, место под картинку */
  --fill3: rgba(23,23,23,.08); /* жирный в тексте страницы */
  --shadow: rgba(23,23,23,.14);
  --tile: #151515;

  /* ── Акцент · обе темы ─────────────────────────────── */
  --accent: #73BBFF;   /* только: «ждёт вас», черта 2 под активной вкладкой (слово — чернилами, 0.3.1: акцент текстом — 1.82 : 1), включено/фокус, ход (точки), наведение на главную и «+», ключевые слова кода */
  --onAccent: #171717; /* текст на акценте (наведение на главную) */

  /* ── Тёмная поверхность · обе темы (терминал, код, дифф, экран блокировки) ── */
  --dark-bg: #151515;
  --dark-ink: #F2F2F0;
  --dark-muted: #9B9B99;
  --dark-faint: #6E6E6C;             /* номера строк */
  --dark-line: rgba(242,242,240,.16);
  --dark-line2: rgba(242,242,240,.28);
  --dark-fill1: rgba(242,242,240,.06); /* текущая строка */
  --dark-fill2: rgba(242,242,240,.10); /* наведение на значок */
  --dark-fill3: rgba(242,242,240,.16); /* добавленная строка диффа */

  /* ── Шрифт ─────────────────────────────────────────── */
  --font: 'Inter Tight', system-ui, sans-serif;  /* один шрифт; файлы — fonts/inter-tight.css */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* только терминал, файл, дифф */
  --font-ios: -apple-system, 'SF Pro Text', system-ui, sans-serif;      /* iOS-интерфейс вне карточек */
  --weight: 500;              /* один вес; полужирного нет */
  /* Кегли — в rem (0.3.1): шкала та же (21 · 15 · 16 при корне 16), но базовый размер шрифта человека
     действует и текст растёт до 200 % без обрезки (WCAG 2.2 п. 1.4.4). */
  --text-title: 1.3125rem;    /* заголовок, 21 */
  --text-body: 0.9375rem;     /* текст, подпись, машинное, 15 */
  --text-input-touch: 1rem;   /* поля на телефоне — чтобы браузер не увеличивал, 16 */
  --lh-title: 1.2;            /* только заголовок 21; у текста 15 — 1.4 или 1.5 */
  --lh-body: 1.4;
  --lh-speech: 1.5;           /* речь в ленте, лид карточки */
  --tracking: 0;

  /* iOS (Dynamic Type, база) */
  --ios-title: 22px;          /* Title 2 */
  --ios-body: 17px;           /* Body */
  --ios-sub: 15px;            /* Subheadline */
  --ios-caption: 12px;        /* Caption 1 — слово в таб-баре */

  /* ── Отступы · шкала ───────────────────────────────── */
  /* 0.3.1: отступы (поля, зазоры, промежутки) — только 4 · 8 · 12 · 16 · 20 · 24 · 32 · 48. Прочие значения
     шкалы (2, 28, 36, 40, 56–96) — размеры раскладки: шапка 56, облик 88, цель 44; отступом не бывают. */
  --space-0: 0;
  --space-2: 2px;  --space-4: 4px;  --space-8: 8px;   --space-12: 12px;
  --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-28: 28px;
  --space-32: 32px; --space-36: 36px; --space-40: 40px; --space-48: 48px;
  --space-56: 56px; --space-64: 64px; --space-72: 72px; --space-80: 80px;
  --space-88: 88px; --space-96: 96px;

  /* Ритм (§04) */
  --row-pad: 12px;            /* строка списка/таблицы/итога: 12 сверху и снизу */
  --door-outer: 4px;          /* строка-дверь: 4 от черты */
  --door-inner: 8px 12px;     /* + 8 сверху/снизу, поля подсветки 12 */
  --label-gap: 12px;          /* подпись секции → список */
  --block-gap: 24px;          /* блок → блок в карточке */
  --section-gap: 32px;        /* секция → секция в панели и окне */
  --title-lead-gap: 8px;      /* заголовок → лид */
  --actions-top: 24px;        /* над рядом кнопок */
  --actions-gap: 12px;        /* между кнопками */
  --card-pad: 24px;           /* карточка, панель, окно */
  --card-pad-phone: 16px;
  --msg-pad: 16px 20px;       /* строка-сообщение, своя речь, блок ленты */
  --nest: 48px;               /* вложенность = облик 36 + 12 (40 → 52, 32 → 44) */

  /* ── Радиусы ───────────────────────────────────────── */
  /* 0.3.1: шесть радиусов — 6 · 12 · 18 · 24 · пилюля · круг; 16 (меню, обложка) и 20 (карточка вне ленты)
     сведены к 18: на глаз 16, 18 и 20 не различаются. */
  --radius-6: 6px;            /* отметка, знак папки, клавиша */
  --radius-12: 12px;          /* подсветка строки, плитка значка, картинка */
  --radius-18: 18px;          /* блок ленты, карточка вне ленты, обложка, меню, кадр ролика */
  --radius-feed-agent: 18px 18px 18px 6px; /* окно ленты: угол 6 — к облику */
  --radius-feed-own: 18px 18px 6px 18px;   /* своя речь */
  --radius-24: 24px;          /* панель, окно, многострочное поле, шторка (сверху) */
  --radius-pill: 999px;       /* кнопка, поле, композер, метка */
  --radius-round: 50%;        /* значок-кнопка, человек */

  /* ── Тени · только у того, что поверх ──────────────── */
  --shadow-window: 0 24px 64px var(--shadow);
  --shadow-panel: -24px 0 48px var(--shadow);   /* панель поверх ленты, 768–1023 */
  --shadow-menu: 0 12px 32px var(--shadow);     /* меню, всплывающая полоса */
  --shadow-sheet: 0 -12px 32px var(--shadow);   /* шторка iOS */
  --dim-under-panel: .4;
  --dim-expired: .6;

  /* ── Размеры ───────────────────────────────────────── */
  --control: 48px;            /* кнопка, поле, пилюля — одна высота */
  --control-ios: 50px;
  --hit: 44px;                /* цель нажатия на касании */
  --hit-pointer: 28px;        /* цель под указателем, веб и Mac (0.3.1); никогда меньше 24 (WCAG 2.2 п. 2.5.8) */
  --row-pill-min: 120px;      /* кнопка в строке: 48 × от 120 */
  --icon-btn: 36px;           /* значок-кнопка */
  --icon-btn-main: 40px;      /* главная значком (▶, звонок) */
  --composer-main: 44px;      /* главная композера */
  --composer-plus: 40px;
  --icon-btn-inline: 28px;    /* значок в строке текста — цель указателя (0.3.1; было 24); строку не раздвигает: поля −4 сверху и снизу */
  --icon: 20px;  --icon-inline: 18px;  --icon-stroke: 1.75;
  --toggle-w: 52px; --toggle-h: 30px; --toggle-knob: 24px;
  --check: 24px;
  --header: 56px;             /* шапка колонки, панели, окна — одна линия */
  --tabs: 48px;
  --dot: 8px;                 /* точка «ждёт вас» */
  --avatar-24: 24px; --avatar-32: 32px; --avatar-36: 36px; --avatar-40: 40px; --avatar-48: 48px; --avatar-88: 88px;
  --logo-company: 40px;       /* логотип компании, радиус 12 */

  /* ── Раскладка ─────────────────────────────────────── */
  --list-w: clamp(248px, 19vw, 340px);
  --panel-w: clamp(344px, 27vw, 440px); /* тянется 320 … 60 %, ленте ≥ 440 */
  --feed-w: 820px;
  --feed-side: clamp(12px, 4vw, 32px);
  --feed-window-max: min(600px, 82%);
  --own-speech-max: min(640px, 78%);
  --window-w: min(880px, 100%);
  --window-max-h: 82vh;
  --window-top: 8vh;
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
  --ios-safe-top: 59px; --ios-safe-bottom: 34px; --ios-tabbar: 49px;
  --mac-window: 1280px 800px; --mac-window-min: 960px 640px; --mac-traffic-zone: 52px;

  /* ── Движение ──────────────────────────────────────── */
  --dur: 150ms;               /* только color, background-color, border-color */
  --ease: ease-out;
  --dots-cycle: 1.2s;         /* точки хода: .2 → 1 → .2, сдвиг 0 / .2 / .4 с */
  --float-cycle: 3.2s;        /* парение маскота от 64, сдвиг 6 % */
  --motion-clip-min: 3s;      /* ролик в карточке */
  --motion-clip-max: 15s;
}

[data-theme="dark"] {
  --paper: #151515;
  --side: #1C1C1C;             /* колонки светлее ленты и в тёмной: 1.07 : 1 к бумаге, как в светлой */
  --ink: #F2F2F0;
  --muted: #9B9B99;
  --faint: #6E6E6C;
  --onInk: #151515;
  --line: rgba(242,242,240,.16);
  --line2: rgba(242,242,240,.28);
  --line3: rgba(242,242,240,.36);
  --fill1: rgba(242,242,240,.06);
  --fill2: rgba(242,242,240,.10);
  --fill3: rgba(242,242,240,.16);
  --shadow: rgba(0,0,0,.55);
  --tile: rgba(242,242,240,.10);
  /* --accent, --onAccent и --dark-* не меняются */
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; } /* точки, парение и ролики стоят; ролик — сразу последний кадр */
}