/* ============================================================
AMOTG — токены дизайн-системы.
Единственное место, где допустимы литеральные цвета и размеры.
В компонентах — только var(--…).
Тема: тёмная по умолчанию, светлая через [data-theme="light"]
на (ставится из Telegram.WebApp.colorScheme).
Если JS не отработал — берём системную тему.
============================================================ */
:root {
/* ---------- поверхности ---------- */
--bg: #10151D;
--surface: #181F29;
--surface-hi: #212A36;
/* ---------- линии ---------- */
--line: rgba(255, 255, 255, .07);
--line-hi: rgba(255, 255, 255, .12);
/* ---------- текст ---------- */
--tx: #E9EDF3;
--tx2: #818C9C;
--tx3: #5B6573;
--tx-quote: #B9C1CD;
/* ---------- статусные цвета ----------
accent — прогресс и действия
live — работает
warn — ошибки отправки
danger — только удаление и floodwait */
--accent: #4A90F0;
--accent-dim: rgba(74, 144, 240, .14);
--accent-line: rgba(74, 144, 240, .40);
--accent-tx: #9CC4F8;
--live: #3FCB96;
--live-dim: rgba(63, 203, 150, .13);
--live-glow: rgba(63, 203, 150, .50);
--warn: #F0A93E;
--warn-dim: rgba(240, 169, 62, .13);
--danger: #E5544B;
--danger-dim: rgba(229, 84, 75, .13);
--danger-line: rgba(229, 84, 75, .42);
--danger-line-2: rgba(229, 84, 75, .30);
/* ---------- служебные подложки ---------- */
--track: rgba(255, 255, 255, .09); /* полосы прогресса, риски */
--ctl-bg: rgba(255, 255, 255, .05); /* кнопки, icon-btn */
--pill-bg: rgba(255, 255, 255, .06); /* нейтральные пиллы */
/* Текст поверх заливки accent — в обеих темах белый. */
--on-accent: #FFFFFF;
/* Стрелка select. Внутрь data-URI переменные не подставляются,
поэтому цвет зашит здесь и переопределяется для светлой темы. */
--select-arrow: url("data:image/svg+xml;utf8,");
/* ---------- шрифты ---------- */
--font-ui: 'Inter', -apple-system, system-ui, 'Segoe UI', sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
--fw-regular: 400;
--fw-medium: 500;
/* ---------- размеры текста ----------
Опорные четыре — из задания, остальные тянутся за ними. */
--fs-title: 23px; /* заголовок экрана, 500 */
--fs-card-title: 14.5px; /* заголовок карточки, 400 */
--fs-caption: 12.5px; /* подпись, 400 */
--fs-metric: 17px; /* метрика, 500 */
--fs-body: 14px;
--fs-row: 13.5px; /* строка списка, цитата */
--fs-btn: 15px;
--fs-btn-sm: 13.5px;
--fs-input: 14.5px;
--fs-pill: 11.5px;
--fs-hint: 12px;
--fs-tab: 10px;
--fs-metric-sm: 18px; /* плитки сводки в журнале */
--fs-lead: 16px; /* заголовок пустого состояния */
--fs-icon: 19px;
/* ---------- шаг сетки: кратно 4 ---------- */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 20px;
--sp-6: 24px;
/* Именованные отступы (значения заданы макетом). */
--pad-screen: var(--sp-4); /* поля экрана 16 */
--pad-card: 14px; /* внутри карточки 14 */
--gap-card: 10px; /* между карточками 10 */
--gap-section: 22px; /* между секциями 22 */
/* ---------- радиусы ---------- */
--r-card: 14px;
--r-ctl: 10px;
--r-sum: 11px;
--r-day: 9px;
--r-pill: 7px;
--r-chip: 16px;
--r-tick: 2px;
/* ---------- границы ---------- */
--bd-w: .5px;
--bd: var(--bd-w) solid var(--line);
--bd-hi: var(--bd-w) solid var(--line-hi);
/* ---------- высоты контролов ---------- */
--h-ctl: 42px;
--h-btn: 46px;
--h-btn-sm: 38px;
--h-icon: 38px;
--h-day: 36px;
--h-chip: 31px;
/* ---------- прочее ---------- */
--tr: .14s;
--focus-ring: 0 0 0 3px var(--accent-dim);
}
/* ============================================================
Светлая тема — те же токены, другие значения.
Акцент и статусы затемнены: исходные светлые оттенки
не дают достаточного контраста на белом.
============================================================ */
:root[data-theme="light"] {
--bg: #F4F6FA;
--surface: #FFFFFF;
--surface-hi: #EFF2F7;
--line: rgba(16, 21, 29, .10);
--line-hi: rgba(16, 21, 29, .16);
--tx: #10151D;
--tx2: #5B6573;
--tx3: #8A94A3;
--tx-quote: #39424F;
--accent: #2E7BD6;
--accent-dim: rgba(46, 123, 214, .12);
--accent-line: rgba(46, 123, 214, .45);
--accent-tx: #1F5FA8;
--live: #1FA971;
--live-dim: rgba(31, 169, 113, .13);
--live-glow: rgba(31, 169, 113, .45);
--warn: #C07510;
--warn-dim: rgba(192, 117, 16, .14);
--danger: #D33B32;
--danger-dim: rgba(211, 59, 50, .12);
--danger-line: rgba(211, 59, 50, .45);
--danger-line-2: rgba(211, 59, 50, .30);
--track: rgba(16, 21, 29, .10);
--ctl-bg: rgba(16, 21, 29, .04);
--pill-bg: rgba(16, 21, 29, .06);
--select-arrow: url("data:image/svg+xml;utf8,");
}
/* Пока JS не проставил data-theme — уважаем системную настройку. */
@media (prefers-color-scheme: light) {
:root:not([data-theme]) {
--bg: #F4F6FA;
--surface: #FFFFFF;
--surface-hi: #EFF2F7;
--line: rgba(16, 21, 29, .10);
--line-hi: rgba(16, 21, 29, .16);
--tx: #10151D;
--tx2: #5B6573;
--tx3: #8A94A3;
--tx-quote: #39424F;
--accent: #2E7BD6;
--accent-dim: rgba(46, 123, 214, .12);
--accent-line: rgba(46, 123, 214, .45);
--accent-tx: #1F5FA8;
--live: #1FA971;
--live-dim: rgba(31, 169, 113, .13);
--live-glow: rgba(31, 169, 113, .45);
--warn: #C07510;
--warn-dim: rgba(192, 117, 16, .14);
--danger: #D33B32;
--danger-dim: rgba(211, 59, 50, .12);
--danger-line: rgba(211, 59, 50, .45);
--danger-line-2: rgba(211, 59, 50, .30);
--track: rgba(16, 21, 29, .10);
--ctl-bg: rgba(16, 21, 29, .04);
--pill-bg: rgba(16, 21, 29, .06);
}
}