/* Токены дизайна — mvp.md, раздел «Дизайн: поправки к design-2026-09.md» (таблица цветов — источник истины) и design-2026-09.md, раздел 3 (типографика, сетка, форма). Темы: - светлая — значения по умолчанию в :root; - тёмная (тёплая, не чёрная) — включается либо системной настройкой (@media prefers-color-scheme: dark, только если пользователь не выбрал вручную светлую тему), либо явным выбором пользователя (:root[data-theme="dark"]). Переключатель — wwwroot/js/theme.js, атрибут data-theme на ставится инлайн-скриптом в _Layout.cshtml до отрисовки, чтобы не было вспышки темы. */ :root { color-scheme: light; /* Цвет — светлая тема (по умолчанию) */ --bg: #FAF8F5; --surface: #F0E9E0; --ink: #3D2914; --ink-soft: #6B5B49; --accent: #A14D2D; --accent-2: #407170; --line: rgba(61, 41, 20, 0.14); /* Текст на заливке --accent (кнопка CTA) — mvp.md: 5,5:1 светлая / 6,7:1 тёмная */ --on-accent: var(--bg); /* Шрифты — self-host, см. fonts.css. Системный стек — фолбэк на время загрузки и на случай недоступности шрифта. */ --font-display: "Prata", Georgia, "Times New Roman", serif; --font-text: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Насыщенность Golos Text (переменный шрифт, 400–600) */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; /* Типографская шкала. Базовый размер — 16px (html). Заголовки — по шкале брифа 28/36/48px на десктопе, меньше на мобиле, плавно через clamp(). Тело — Golos Text 16–18px / 1.6 (design-2026-09.md, раздел 3). */ --text-h1: clamp(2rem, 1.6rem + 2vw, 3rem); /* 32px → 48px */ --text-h2: clamp(1.625rem, 1.4rem + 1.1vw, 2.25rem); /* 26px → 36px */ --text-h3: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); /* 22px → 28px */ --text-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); /* 16px → 18px */ --text-small: 0.875rem; /* 14px — вторичный текст, подписи */ --text-mono: 0.875rem; /* 14px — JetBrains Mono: подписи и даты */ --leading-heading: 1.15; --leading-body: 1.6; /* Отступы — шкала на базе 4px */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px — боковой отступ на телефоне */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ /* Сетка (M8-1, mvp.md «Дизайн: поправки», п. 10) */ --page-max: 72rem; /* ~1150px — общая рамка шапки, main и подвала на всех страницах */ --content-width: 42.5rem; /* ~680px — дефолтная колонка (временно — лендинг, до M8-4) */ --content-width-narrow: 28rem; /* узкая центрированная колонка — формы и одноэкранные страницы */ --reading-width: 40rem; /* колонка чтения — связный текст, 65–75 знаков в строке */ --aside-min: 16rem; /* разумный минимум боковой колонки в паре «основная + боковая» */ --aside-nav-max: 18rem; /* потолок узкой боковой навигации (документы, оглавление) — не 5fr */ --gutter: var(--space-4); /* 16px на телефоне */ /* Форма — «печатная» геометрия: небольшие радиусы, волосяные границы вместо теней */ --radius-sm: 6px; --radius-md: 8px; --line-width: 1px; --shadow: none; /* Фокус — виден всегда, не полагается на цвет линии */ --focus-ring-color: var(--accent); --focus-ring-width: 2px; --focus-ring-offset: 2px; /* Движение — отключается через prefers-reduced-motion в site.css */ --transition-fast: 150ms ease; --transition-base: 200ms ease; } /* Тёмная тема — системная настройка, если пользователь не выбрал светлую вручную */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #1C1612; --surface: #29211B; --ink: #EDE4D8; --ink-soft: #B5A796; --accent: #E0875F; --accent-2: #86C2BF; --line: rgba(237, 228, 216, 0.14); } } /* Тёмная тема — явный выбор пользователя (переключатель в шапке) */ :root[data-theme="dark"] { color-scheme: dark; --bg: #1C1612; --surface: #29211B; --ink: #EDE4D8; --ink-soft: #B5A796; --accent: #E0875F; --accent-2: #86C2BF; --line: rgba(237, 228, 216, 0.14); } /* Светлая тема — явный выбор пользователя поверх тёмной системной настройки */ :root[data-theme="light"] { color-scheme: light; --bg: #FAF8F5; --surface: #F0E9E0; --ink: #3D2914; --ink-soft: #6B5B49; --accent: #A14D2D; --accent-2: #407170; --line: rgba(61, 41, 20, 0.14); }