/* ============================================================================ VPN-HUB · v3/tokens.css — дизайн-токены каркаса /v3. Взято за основу: static/rd/css/tokens.css (черновик редизайна). Отличия от черновика: - шрифты: Unbounded (заголовки) + Manrope (текст) вместо IBM Plex/моноширинного. .woff2 лежат в /static/fonts, подключаются отдельным файлом /static/fonts/v3fonts.css (см. base.html , рядом с vhfonts.css), здесь только имена семейств. JetBrains Mono не менялся, он из vhfonts.css. - тема: по умолчанию (без атрибута data-theme) — ТЁМНАЯ, а не системная. Это требование задачи: ключ localStorage 'vh-theme' (общий с боевым сайтом) отсутствует → тёмная. light-dark() резолвится по свойству color-scheme, поэтому здесь оно принудительно 'dark' на :root и переключается на 'light' атрибутом [data-theme="light"] — без обращения к системной теме ОС. ========================================================================== */ @layer tokens { :root { /* --- шрифты: Manrope (текст), Unbounded (заголовки), JetBrains Mono (код) --- */ --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace; --font-display: "Unbounded", "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* заголовки, было var(--font-mono) */ /* --- цвета: light-dark(СВЕТЛАЯ, ТЁМНАЯ) ------------------------------- */ --bg: light-dark(#FAF8F4, #0D0F13); /* фон страницы */ --surface: light-dark(#FFFFFF, #15181E); /* фон карточки */ --raised: light-dark(#FBF9F5, #1C2027); /* приподнятая поверхность */ --border: light-dark(#E8E3DA, #2B3039); /* разделители */ --border-strong: light-dark(#8E8574, #59616D); /* границы полей (≥3:1) */ --text: light-dark(#1A1712, #F3F5F7); /* текст основной */ --text-2: light-dark(#524B3F, #C3CAD3); /* текст вторичный */ --text-muted: light-dark(#6E6656, #929CA8); /* текст приглушённый */ --accent: light-dark(#E39A12, #F5B23E); /* парный оттенок акцента: раньше жил только в article.css/compat.css, и на страницах без них градиент кнопки помощника рушился — оставалось свечение без фона и тёмный текст на тёмном. */ --gold: light-dark(#B9841F, #F5C24B); /* акцент-заливка */ --accent-ink: light-dark(#8A5A08, #F3B44A); /* акцент-текст/ссылки */ --accent-hover: light-dark(#6E4706, #F8C466); /* акцент-ховер ДЛЯ ТЕКСТА */ /* Ховер акцентной ЗАЛИВКИ. Отдельно от текстового: на светлой теме тёмный текстовый ховер превращал кнопку в коричневое пятно. */ --accent-btn-hover: light-dark(#F2A82A, #F8C466); --accent-contrast: light-dark(#1A1305, #17130A); /* текст НА акценте */ --accent-bg: light-dark(#FBF0DA, #2A2113); /* подложка акцента */ --success: light-dark(#2F7A45, #6FC286); --warning: light-dark(#8A5A08, #E0A93A); --error: light-dark(#C13A2B, #F0776A); --focus: light-dark(#B5760C, #F5B23E); /* кольцо фокуса */ --code-bg: light-dark(#F3EFE7, #0A0C10); /* фон кода */ --code-text: light-dark(#6B4A0A, #EAC382); /* текст кода */ --code-kw: light-dark(#A85D0E, #F0A93C); /* ключевые слова */ --overlay: light-dark(rgba(26,23,18,.45), rgba(0,0,0,.6)); /* метка NEW: отдельный холодный тон (не --accent), иначе сливается с PRO */ --new-ink: light-dark(#0B6E93, #6FD3EE); /* бейдж NEW, текст */ --new-bg: light-dark(#E1F1F6, #122A33); /* бейдж NEW, подложка */ /* --- радиусы --- */ --r-sm: 6px; --r: 9px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px; /* --- тени (минимум; в основном держим форму границами) --- */ --shadow-1: 0 1px 2px light-dark(rgba(26,23,18,.05), rgba(0,0,0,.35)); --shadow-2: 0 8px 24px -12px light-dark(rgba(26,23,18,.22), rgba(0,0,0,.6)); /* --- типографическая шкала (16px база), поднята: было мелко --- */ --fs-caption: .8125rem; /* 13, было 12 */ --fs-sm: .875rem; /* 14, было 13 */ --fs-body: .9375rem; /* 15, интерфейс (уже на ориентире, без изменений) */ --fs-md: 1.0625rem; /* 17, текст статьи (уже на ориентире, без изменений) */ --fs-lg: 1.375rem; /* 22, было 20 */ --fs-xl: 1.75rem; /* 28, было 24 */ --fs-2xl: 2.5rem; /* 40, было 32 */ --fs-3xl: clamp(2.25rem, 1.5rem + 2.8vw, 3.25rem); /* герой, было clamp(2rem, 1.3rem + 2.6vw, 2.9rem) */ --ls-display: -.03em; /* трекинг заголовков (Unbounded на крупных кеглях), было -.015em инлайн в app.css */ --lh-tight: 1.15; /* было 1.12, запас под более крупные/жирные заголовки */ --lh: 1.5; --lh-article: 1.72; --measure: 100ch; /* по просьбе владельца: текст во всю ширину */ /* макс. длина строки чтения статьи (~65–75 знаков) */ /* --- отступы: сокращены sp-6..8 (крупные межсекционные), sp-1..5 без изменений --- */ --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 1.75rem; --sp-7: 2.25rem; --sp-8: 3rem; /* было: --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; */ /* --- движение (140–320мс, только transform/opacity) --- */ --dur: 180ms; --dur-fast: 140ms; --dur-slow: 320ms; /* появление контента страницы (.main.is-entering) — заметно медленнее переходов интерфейса */ --ease: cubic-bezier(.2, .6, .2, 1); /* --- каркас --- */ --sidebar-w: 340px; /* было 264: на большом мониторе меню читалось мелко */ --topbar-h: 56px; --bottombar-h: 60px; /* было фикс. 1320px: на широком мониторе (владелец, ~2000px области контента) по бокам оставались пустые поля. Ниже ~1447px значение не меняется (как раньше), дальше плавно растёт и с ~2012px держит потолок 1800px. */ --content-max: clamp(1200px, 92vw, 2200px); color-scheme: dark; /* дефолт БЕЗ атрибута data-theme = тёмная (не системная) */ /* ── Псевдонимы старых имён ─────────────────────────────────────────────── В шаблонах v3 осталось 17 файлов со старыми именами (--ink, --card, --acc, --mono). Токенов с такими именами нет, поэтому подставлялось запасное значение, вписанное по месту, — и у --acc их оказалось ТРИ разных оранжевых. Дешевле дать псевдонимы здесь, чем править семнадцать файлов и ждать, пока кто-нибудь снова напишет старое имя по привычке. */ --ink: var(--text); --ink2: var(--text-2); --mut: var(--text-2); /* как в compat.css — иначе один токен значит разное */ --card: var(--surface); --card2: var(--raised); --card3: var(--raised); --line: var(--border); --acc: var(--accent); --mono: var(--font-mono); --sans: var(--font-sans); } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } }