/* ========================================================================== design-tokens.css — единая таблица ролей платформы «Инвестиции просто» Правила и объяснения: DESIGN.md в корне репозитория. ГЛАВНОЕ ПРАВИЛО: в разметке страниц не должно быть ни одного конкретного цвета. Только роли отсюда. Тогда тёмная тема включается подменой таблицы, а не перекраской сотни мест. Тема выбирается так: - по умолчанию — светлая; - системная тёмная подхватывается автоматически; - выбор человека (кнопка) ставит data-theme="dark|light" на и перекрывает системную настройку в обе стороны. ========================================================================== */ :root { /* ── Текст: четыре ступени, больше не заводить ───────────────────────── */ --text: #0A1F44; /* заголовки и основной текст */ --text-2: #46536E; /* пояснения, подписи под заголовком */ --text-3: #626F88; /* метаданные: дата, длительность, единицы */ --text-on-accent: #FFFFFF; /* ── Поверхности: три уровня ─────────────────────────────────────────── */ --bg: #F5F7FB; /* фон страницы */ --surface: #FFFFFF; /* карточки, панели */ --surface-2: #EEF3FC; /* вложенные блоки, плашки, поля ввода */ --line: #E4E9F2; /* разделители и границы */ /* ── Акцент: синий. Один на всю платформу ────────────────────────────── */ --accent: #2F6BD8; /* акцентный текст, ссылки, иконки */ --accent-fill: #2F6BD8; /* заливка главной кнопки (под --text-on-accent) */ --accent-2: #1E4FB0; /* наведение и нажатие */ --accent-soft: #EEF3FC; /* подложка под акцентным текстом */ /* ── Значения. Только по смыслу, не для красоты ──────────────────────── */ --ok: #0D6B45; /* доступ открыт, рост, успех */ --ok-soft: #E6F4EC; --warn: #8A5600; /* требует внимания */ --warn-soft: #FBF1DE; --danger: #B0453B; /* ошибка, удаление, падение */ --danger-soft: #FBEAE8; /* ── Золото: только «путь по карте инвестора». Больше нигде ──────────── */ --gold: #8F6612; --gold-soft: #FBF3E0; /* ── Тёмная карточка результата (одинакова в обеих темах) ────────────── */ --result-from: #12305F; --result-to: #061530; --result-text: #EAF0FB; --result-num: #F0C86A; /* ── Скругления: три. Четвёртого нет ─────────────────────────────────── */ --r-sm: 10px; /* кнопки, поля, вкладки */ --r-md: 16px; /* карточки и панели */ --r-pill: 999px; /* статусы, чипы, круглые кнопки */ /* ── Тени: две. Третьей нет ──────────────────────────────────────────── */ --shadow-1: 0 6px 24px -12px rgba(10, 31, 68, .28); /* карточка */ --shadow-2: 0 20px 50px -26px rgba(10, 31, 68, .55); /* герой экрана */ /* ── Шрифт и размеры: семь ступеней ──────────────────────────────────── */ --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-num: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --t-hero: 34px; /* главный заголовок экрана */ --t-title: 27px; /* заголовок раздела */ --t-section: 21px; /* подзаголовок, название карточки */ --t-lead: 17px; /* основной текст */ --t-body: 15px; /* интерфейсный текст, кнопки */ --t-meta: 13px; /* подписи, метаданные */ --t-label: 12px; /* надзаголовки капсом, единицы */ /* ── Отступы: шаг 8. Все размеры кратны ──────────────────────────────── */ --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px; --sp-5: 48px; } /* ── Тёмная тема: меняются ТОЛЬКО значения ролей ───────────────────────── */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --text: #EAF0FB; --text-2: #A9B8D4; --text-3: #7487AA; --bg: #070E1E; --surface: #0E1A33; --surface-2: #16274A; --line: #1E2E4F; --accent: #6BA5FF; /* акцентный текст на тёмном фоне */ --accent-fill: #2F6BD8; /* заливка кнопки — под белый текст */ --accent-2: #8CBBFF; --accent-soft: #16274A; --ok: #34D399; --ok-soft: #10291F; --warn: #E8B45A; --warn-soft: #2A2113; --danger: #F08379; --danger-soft: #2E1614; --gold: #E8C476; --gold-soft: #241D0F; --shadow-1: 0 8px 30px -14px rgba(0, 0, 0, .8); --shadow-2: 0 24px 60px -28px rgba(0, 0, 0, .9); } } :root[data-theme="dark"] { --text: #EAF0FB; --text-2: #A9B8D4; --text-3: #7487AA; --bg: #070E1E; --surface: #0E1A33; --surface-2: #16274A; --line: #1E2E4F; --accent: #6BA5FF; --accent-fill: #2F6BD8; --accent-2: #8CBBFF; --accent-soft: #16274A; --ok: #34D399; --ok-soft: #10291F; --warn: #E8B45A; --warn-soft: #2A2113; --danger: #F08379; --danger-soft: #2E1614; --gold: #E8C476; --gold-soft: #241D0F; --shadow-1: 0 8px 30px -14px rgba(0, 0, 0, .8); --shadow-2: 0 24px 60px -28px rgba(0, 0, 0, .9); } /* Явный выбор светлой темы перекрывает системную тёмную */ :root[data-theme="light"] { --text: #0A1F44; --text-2: #46536E; --text-3: #626F88; --bg: #F5F7FB; --surface: #FFFFFF; --surface-2: #EEF3FC; --line: #E4E9F2; --accent: #2F6BD8; --accent-fill: #2F6BD8; --accent-2: #1E4FB0; --accent-soft: #EEF3FC; --ok: #0D6B45; --ok-soft: #E6F4EC; --warn: #8A5600; --warn-soft: #FBF1DE; --danger: #B0453B; --danger-soft: #FBEAE8; --gold: #8F6612; --gold-soft: #FBF3E0; --shadow-1: 0 6px 24px -12px rgba(10, 31, 68, .28); --shadow-2: 0 20px 50px -26px rgba(10, 31, 68, .55); } /* ── Базовые правила, общие для всех страниц ───────────────────────────── */ body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--t-lead); line-height: 1.6; -webkit-font-smoothing: antialiased; } /* Цифры в таблицах и показателях выравниваются по разрядам */ .num, [data-num] { font-family: var(--font-num); font-variant-numeric: tabular-nums; } /* Клавиатурная навигация должна быть видна — это не украшение */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }