/* ============================================================ tokens.css — все CSS-переменные дизайн-системы Источник правды: - handoff/Reader colored variants v2.html (палитры, размеры, gaps) - handoff/docs/02-typography.md (шрифты, размеры) - handoff/docs/03-colors-and-themes.md (POS / tense / role hex) - handoff/docs/07-variables-cheatsheet.md (имена и дефолты) Содержит ТОЛЬКО переменные. Без селекторов компонентов. Темы (theme-mist / theme-sumi) — в themes.css. ============================================================ */ :root { /* ===== Шрифтовые семейства ===== */ /* Системные — не переключаются классами */ --font-display: 'Fraunces', Georgia, serif; --font-ui: 'Inter', system-ui, sans-serif; --font-ipa: 'Charis SIL', 'Doulos SIL', 'Lucida Sans Unicode', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* Тело текста — дефолт со встроенным multi-script fallback (CJK/Arabic/Hebrew/ Devanagari): браузер берёт первый шрифт с покрытием нужного скрипта. Переключается через .font-* классы (см. themes.css), для конкретного скрипта — через body.lang-* (см. base.css / reader.css multilang-секция). */ --font-body: 'Lora', 'Source Serif 4', 'Noto Sans', 'Noto Sans SC', 'Noto Sans CJK SC', 'Noto Naskh Arabic', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Serif Hebrew', 'Noto Sans Devanagari', 'Noto Serif Devanagari', Georgia, 'Times New Roman', serif; /* ===== Размеры (ридер) ===== */ --fz-word: 21px; /* размер слова в потоке */ --fz-ipa: 10px; /* IPA транскрипция. 2026-05-15 v15: 11→10 — annotations меньше чтобы сжать межстрочное расстояние. IPA = hint, не основной reading content — 10px остаётся читаемым. */ --fz-tr: 10px; /* перевод-чип под словом. 2026-05-15 v15: 11→10 (то же). */ /* ===== Зазоры IPA / перевода (могут быть отрицательными для наезда) ===== 2026-05-16 v20: -4/-2 → -6/-4. User: «за каждый пиксель боремся». Чипы overlap'ятся с text больше (читаемость сохраняется — chip top слегка перекрывает text top, но visible char part всё равно outside). */ --ipa-gap: -6px; /* IPA сверху от слова */ --tr-gap: -4px; /* перевод снизу от слова */ /* ===== Межстрочный интервал и стек переводов ===== */ --line-h: 2.2; /* line-height ридера */ --tr-row-h: 16px; /* высота этажа в стеке переводов */ /* ===== Радиусы и тени ===== */ --radius-sm: 3px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 12px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(0,0,0,0.06); --shadow-md: 0 2px 8px rgba(0,0,0,0.04); --shadow-lg: 0 6px 16px rgba(0,0,0,0.08); --shadow-pop: var(--shadow-lg); /* поповеры — та же высота что lg */ /* Legacy aliases (для совместимости со старым style.css) */ --shadow: 0 4px 20px rgba(0,0,0,0.08); --radius: 10px; /* ===== Шкала отступов ===== Единая константная шкала для padding / margin / gap. Новый и рефакторённый код использует ТОЛЬКО эти значения — не произвольные px. (refactoring-ui: constrained spacing scale.) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* Layout — topbar высота (используется в style.css strip-mode v26 для top offset words-panel strip). 56px = padding 12+12 + content ~32px. */ --topbar-h: 56px; /* ============================================================ ТЕМА LINEN (по умолчанию) — тёплая бумажная, для долгих сессий ============================================================ */ /* Поверхности (canonical hex из themes-v3.jsx + palettes.jsx, Design книги/_ _ (1)) */ --bg: #f5f2ec; --surface: #efebe3; --surface-2: #e5dfd3; --surface-3: #d8ceb8; /* legacy depth, нет в canonical */ /* Бордеры (canonical: light edge для тёплой бумажной палитры) */ --border: #d4cdbe; --border-soft: #e0dacd; /* Текст (canonical inkScale) */ --ink: #26241f; --ink-soft: #52504a; --ink-muted: #82807a; --ink-faint: #a8a59e; /* Перевод (canonical: cool green, НЕ warm brown как было раньше) */ --translation: #5c6b4a; /* Highlight (project, оставляем тёплый для reading-pleasure) */ --hl: #e6dcc4; --hl-strong: #d8c896; /* Семантические акценты (--accent теперь canonical green; --bad оставлен terracotta для error states) */ --accent: #5c6b4a; /* canonical accent = translation green */ --accent-soft: #647a5c; /* canonical learned */ --good: #647a5c; /* canonical learned */ --warn: #9c7240; /* canonical note */ --bad: #a04330; /* legacy terracotta для error/destructive */ /* ===== Bookmark / margin annotation palette (Bare-Glyph F1 + Бусины Горизонт A2) ===== 5 mute earth tones, round-robin при создании новой заметки если категория не выбрана. Reference: Design книги/02-margin-elements/bare-glyph-5-variants.html lines 21-25 Design книги/03-bookmarks/notches-quotes-minimap-detail.html lines 21-25 */ --bm-1: #7a4e3a; /* rust — favorites / quotes */ --bm-2: #9c7240; /* ochre — notes */ --bm-3: #6f7a4a; /* olive — archive */ --bm-4: #3f6080; /* steel — refs */ --bm-5: #5e4a6e; /* aubergine — fragments */ /* ===== Цвета частей речи (POS) — приглушённый академический справочник ===== Все на одной светлоте (~50), hue распределён равномерно. */ --pos-noun: #5a4a8a; /* существительное — индиго */ --pos-verb: #a04330; /* глагол — терракота */ --pos-adj: #2f6a4a; /* прилагательное — мох */ --pos-adv: #b08020; /* наречие — охра */ --pos-prep: #7a7065; /* предлог — тёплый серый */ --pos-pron: #6f4a7a; /* местоимение — лиловый */ --pos-det: #8a8273; /* артикль/детерм. — мутный */ --pos-conj: #3f6080; /* союз — стальной */ --pos-aux: #a85060; /* вспом. глагол — приглушённый красный */ /* ===== Цвета времён глагола — спектральный градиент ===== прошлое → настоящее → будущее, через тёплые к холодным. */ --tense-past-perfect: #6a3a8a; /* дальнее прошлое — фиолетовый */ --tense-past: #a04330; /* прошлое — терракота */ --tense-past-cont: #c2603a; /* длит. прошлое — оранжевый */ --tense-present: #2f6a4a; /* настоящее — мох */ --tense-present-cont: #3a8a5a; /* длит. настоящее — травяной */ --tense-present-perfect: #2a6a8a; /* связь с наст. — морской */ --tense-future: #4a4ab0; /* будущее — индиго */ --tense-cond: #7a4a8a; /* условное — пурпурный */ /* ===== Цвета синтаксических ролей ===== Терракота (--role-verb) намеренно повторяет глагол / past — снижает когнитивную нагрузку: «терракота = действие» во всех режимах. */ --role-subject: #2a6a8a; /* подлежащее — синий */ --role-verb: #a04330; /* сказуемое — терракота */ --role-object: #2f6a4a; /* дополнение — зелёный */ --role-modifier: #b08020; /* определение/обстоятельство — охра */ --role-clause: #7a4a8a; /* придаточное (фон-обводка) — пурпурный */ /* ============================================================ Размеры карточек (внутри/README.md spec) 5 фиксированных размеров + +10% breathing ============================================================ */ --card-mini-w: 140px; --card-mini-h: 40px; --card-small-w: 170px; --card-small-h: 48px; --card-med-w: 200px; --card-wide-mini-w: 260px; --card-wide-w: 260px; /* Размер ячейки grid-бинпэкинга (mw-sz-flow) */ --card-grid-min: 140px; --card-grid-row: 40px; --card-grid-gap: 3px; /* +10% дыхание для всех размеров */ --card-breathe: 1.1; /* ============================================================ MULTILANG ТОКЕНЫ (light/linen defaults) Тёмные варианты (mist/sumi) — в themes.css. Раньше эти токены жили в :root внутри reader.css и ПЕРЕКРЫВАЛИ themes.css по порядку загрузки → тёмные темы получали светлые цвета. Перенесены сюда (loads first) — теперь themes.css корректно их переопределяет. ============================================================ */ /* POS extensions — CJK/Hindi (частица / классификатор / числительное) */ --pos-part: #8a6a4a; --pos-class: #5a8a7a; --pos-num: #7a5a30; /* Tense extensions — fr/es (subjunctive / imparfait) */ --tense-subj: #b04a7a; --tense-impf: #8a4a4a; /* Gender — shared для fr/es/hi/he/ar */ --gender-m: #3a6a9a; --gender-f: #b04a7a; --gender-n: #6a7a5a; /* CJK тоны — 5 уровней */ --tone-1: #c2603a; /* ровный — оранжевый */ --tone-2: #2f6a4a; /* восходящий — мох */ --tone-3: #4a4ab0; /* нисходяще-восходящий — индиго */ --tone-4: #a04330; /* нисходящий — терракота */ --tone-5: #8a8273; /* нейтральный — серый */ /* CJK HSK уровни — градиент по сложности */ --hsk-1: #2f6a4a; --hsk-2: #3a8a5a; --hsk-3: #b08020; --hsk-4: #c2603a; --hsk-5: #a04330; --hsk-6: #6a3a8a; /* lang-ru: падежи */ --case-nom: #2a6a8a; /* именительный — спокойный синий */ --case-gen: #a04330; /* родительный — терракота */ --case-dat: #2f6a4a; /* дательный — мох */ --case-acc: #b08020; /* винительный — охра */ --case-ins: #6a3a8a; /* творительный — пурпур */ --case-loc: #4a4ab0; /* предложный — индиго */ --case-voc: #b04a7a; /* звательный — фуксия (sr) */ /* lang-ru: вид глагола */ --aspect-perf: #a04330; /* совершенный */ --aspect-impf: #2f6a4a; /* несовершенный */ /* Глиф для cursor trail + закладок (heart по умолчанию, star — опционально). Переключается через [data-glyph] на — см. themes.css. */ --glyph-char: "\2665"; /* ♥ */ }