/* ========================================================================== tokens.css — Design tokens (Apple-style redesign, Wave 0 foundation) ========================================================================== Только CSS custom properties. Никакой конкретной вёрстки/классов здесь нет — компонентные классы см. components.css. НЕ подключён никуда (base.html и т.д.) — будет сделано в Волне 1. ========================================================================== */ :root { /* -------------------------------------------------------------------- Цвета — светлая тема (по умолчанию) -------------------------------------------------------------------- */ --color-bg: #f6f5f2; /* тёплый светлый фон (не клинический серый) */ --color-bg-elevated: #ffffff; /* фон приподнятых секций/панелей */ /* Едва заметное фоновое "свечение" — тёплый янтарь сверху-слева + холодный индиго снизу-справа. Создаёт ощущение глубины вместо плоского серого, оставаясь очень приглушённым (не отвлекает, не "кричит"). */ --bg-wash: radial-gradient(1100px circle at 12% -8%, rgba(255, 176, 105, 0.18), transparent 55%), radial-gradient(900px circle at 100% 8%, rgba(91, 99, 211, 0.15), transparent 50%); --color-surface: rgba(255, 254, 252, 0.72); /* полупрозрачная поверхность карточек (тёплый белый) */ --color-surface-solid: #ffffff; /* непрозрачный вариант той же поверхности */ --color-surface-hover: rgba(255, 255, 255, 0.92); /* Контраст проверен по WCAG 2.1 на самом тёмном светлом фоне (--color-bg #f6f5f2) — это худший случай; на белой карточке всегда выше. primary 15.44:1 · secondary 7.46:1 (AAA) · tertiary 4.86:1 (AA). */ --color-text-primary: #1d1d1f; /* основной текст, почти чёрный (apple-style) */ --color-text-secondary: #4f4f55; /* вторичный текст: подписи полей, мета-строки карточек */ --color-text-tertiary: #6b6b70; /* самый приглушённый (плейсхолдеры, хинты) — но всё ещё AA */ --color-border: #c9c4ba; /* тонкая граница (тёплый нейтральный, заметнее) */ --color-border-strong: #a8a29a; /* чуть заметнее — hover/focus состояния границ */ --color-divider: rgba(0, 0, 0, 0.09);/* тонкий разделитель строк/секций */ --color-accent: #5b63d3; /* спокойный индиго — приятнее плоского корп.синего */ --color-accent-hover: #6b73e0; --color-accent-active: #4a51b8; --color-accent-soft: rgba(91, 99, 211, 0.1); /* подложка под акцентными pill/фокусами */ --shadow-accent: 0 6px 16px rgba(91, 99, 211, 0.22); /* мягкое "свечение" для primary hover */ /* Имя автора в цитате «ответ на сообщение» (13px/600 на подложке цитаты): акцент #5b63d3 даёт 4.5 впритык, тёмный вариант — 5.9:1. */ --color-quote-ink: #4a51b8; /* Статусные цвета — приглушённые пары (фон + текст) для pill-бейджей, точка-индикатор берёт --*-dot. Оттенки чуть теплее/спокойнее, чем чистые "светофорные" R/Y/G. */ --color-success-bg: rgba(48, 179, 120, 0.16); --color-success-text: #196b40; --color-success-dot: #30b378; --color-warning-bg: rgba(242, 169, 60, 0.20); --color-warning-text: #8a5a10; --color-warning-dot: #f2a93c; --color-danger-bg: rgba(240, 87, 75, 0.16); --color-danger-text: #a12e21; --color-danger-dot: #f0574b; --color-neutral-bg: rgba(110, 110, 115, 0.14); --color-neutral-text: #4f4f55; /* 6.57:1 на подложке нейтрального pill */ --color-neutral-dot: #8e8e93; /* -------------------------------------------------------------------- Радиусы -------------------------------------------------------------------- */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-pill: 999px; /* -------------------------------------------------------------------- Тени — многослойные, мягкие (в духе Apple) -------------------------------------------------------------------- */ --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.03); --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.05); --shadow-3: 0 8px 16px rgba(0, 0, 0, 0.08), 0 24px 48px rgba(0, 0, 0, 0.12); /* -------------------------------------------------------------------- Типографика -------------------------------------------------------------------- */ --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", system-ui, sans-serif; /* Inter — фолбэк через Google Fonts, подключается отдельно в base.html, этот файл шрифт не грузит. */ /* Ступень 12px выделена в отдельный токен --text-meta и предназначена ТОЛЬКО для метаданных: время, служебные пометки, uppercase-метки колонок. Рабочий текст (сообщения, подписи полей, вторичные действия) на десктопе начинается с 14px — раньше он сидел на --text-xs = 12px и читался медленно при многочасовой работе с перепиской и реквизитами. */ --text-meta: 0.75rem; /* 12px — только метаданные */ --text-xs: var(--text-sm); /* 14px: бывшая ступень 12px переехала в --text-meta */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ /* -------------------------------------------------------------------- Отступы — единая шкала (кратно 4px, apple-style "воздух") -------------------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* -------------------------------------------------------------------- Breakpoints — CSS custom properties НЕ работают внутри @media условий, значения задокументированы здесь как справочник для авторов стилей: --bp-phone: 480px (мобильный телефон) --bp-tablet: 768px (планшет; переход card-view → table-view) --bp-desktop: 1024px (десктоп) --bp-wide: 1440px (широкий десктоп; max-width контентной области) Использовать в коде буквально: @media (max-width: 767px) { ... } -------------------------------------------------------------------- */ /* -------------------------------------------------------------------- Транзишены — единые тайминги для микроанимаций -------------------------------------------------------------------- */ --transition-fast: 150ms ease; --transition-base: 200ms ease; --transition-slow: 300ms cubic-bezier(0.2, 0.8, 0.2, 1); } /* ========================================================================== Тёмная тема — структура заложена, НЕ активируется автоматически. Включается атрибутом [data-theme="dark"] на или (переключатель ☀️/🌙 будет добавлен в следующих волнах). ========================================================================== */ [data-theme="dark"] { --color-bg: #1c1c1e; --color-bg-elevated: #2c2c2e; --bg-wash: radial-gradient(1100px circle at 12% -8%, rgba(255, 176, 105, 0.06), transparent 55%), radial-gradient(900px circle at 100% 8%, rgba(108, 116, 255, 0.10), transparent 50%); --color-surface: rgba(44, 44, 46, 0.72); --color-surface-solid: #2c2c2e; --color-surface-hover: rgba(58, 58, 60, 0.9); /* Контраст проверен на самом светлом тёмном фоне (--color-bg-elevated #2c2c2e) — худший случай для светлого текста; на #1c1c1e всегда выше. primary 12.80:1 · secondary 6.75:1 · tertiary 4.86:1 (было 2.75:1 — провал AA). */ --color-text-primary: #f5f5f7; --color-text-secondary: #b4b4ba; --color-text-tertiary: #98989e; --color-border: #38383a; --color-border-strong: #48484a; --color-divider: rgba(255, 255, 255, 0.08); --color-accent: #6c74ff; --color-accent-hover: #838aff; --color-accent-active: #565eec; --color-accent-soft: rgba(108, 116, 255, 0.18); --shadow-accent: 0 6px 16px rgba(108, 116, 255, 0.35); --color-quote-ink: #A5ABFF; /* 5.5:1 на подложке цитаты (было #838aff — 3.96) */ --color-success-bg: rgba(48, 209, 88, 0.16); --color-success-text: #30d158; --color-success-dot: #30d158; --color-warning-bg: rgba(255, 159, 10, 0.18); --color-warning-text: #ff9f0a; --color-warning-dot: #ff9f0a; --color-danger-bg: rgba(255, 69, 58, 0.18); --color-danger-text: #ff7b72; /* 4.52:1 на подложке pill (было #ff453a — 3.35:1, провал AA) */ --color-danger-dot: #ff453a; /* точка-индикатор остаётся фирменным красным */ --color-neutral-bg: rgba(161, 161, 166, 0.16); --color-neutral-text: #c7c7cc; /* 6.24:1 на подложке pill (было #a1a1a6 — 4.08:1, провал AA) */ --color-neutral-dot: #8e8e93; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.24); --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.32), 0 8px 24px rgba(0, 0, 0, 0.28); --shadow-3: 0 8px 16px rgba(0, 0, 0, 0.4), 0 24px 48px rgba(0, 0, 0, 0.5); } /* ========================================================================== Мобильный слой — типографику НЕ поднимаем. ========================================================================== Телефон живёт на собственной шкале (базовые 17px, mobile.css), где --text-xs используется по прямому назначению — как настоящая мелкая метка. Десктопный подъём 12px → 14px туда переносить не нужно, поэтому на телефоне ступень возвращается к 12px. Цветовые токены мобилка и так переопределяет сама (mobile.css, body.m-body / body.has-bottom-nav) — здесь они не дублируются. Класс ставится серверно по is_phone(request) (base.html), поэтому на десктопе это правило не применяется вообще. */ body.m-body, body.has-bottom-nav { --text-xs: var(--text-meta); }