/* * Курьерка — дизайн-токены v1 * * CSS-переменные двух тем (тёмная по умолчанию, светлая по системе или * принудительно через [data-theme="light"]). Подключается ПЕРВЫМ среди * наших стилей в base.html. * * Экраны редизайна постепенно опираются на эти токены: общие компоненты * (формы, рельса, табы, списки) уже на них. Экраны S1–S7 «тёплого терминала» * строятся на расширенном словаре — семантические поверхности, рельса, * вторая производная акцента, «карточные» тени (см. блок F1 в каждой теме). * * Источник эталонных значений: * docs/design/new_frontend_2026_06/concept_2026_06_warm_terminal.html * Дизайн-система: docs/design/new_frontend_2026_06/ (README.md, ROADMAP.md) */ /* ===== Шрифтовые семьи ===== */ :root { --font-ui: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --font-display: 'Newsreader', Georgia, 'Times New Roman', serif; } /* ===== Тёмная тема — дефолт + явный выбор ===== * * История каскада: правила светлой темы для системы (`@media (light)`) * имеют специфичность 0,1,0; явный пользовательский выбор * (`:root[data-theme="…"]`) — 0,2,0. Чтобы при равной специфичности * пользовательский выбор гарантированно побеждал и каскад был * предсказуем, явные правила всегда идут ПОСЛЕ media-блока. * * Тёмная тема — это «по умолчанию» (если data-theme не выставлен) и * «явный выбор Тёмная» (data-theme="dark"). Раньше эти значения * объявлялись дважды (`:root {}` и `:root[data-theme="dark"] {}`), * сейчас вынесены в один групповой селектор (задача 86, F5). */ :root[data-theme="dark"], :root:not([data-theme]) { /* Поверхности — Cocoa Noir (тёплый эспрессо, см. задачу 260524-10) */ --bg-0: #1B1612; --bg-1: #221B16; --bg-2: #2C231D; --bg-3: #382D24; /* Линии и обводки — на тёплом cream-RGB, не на холодном белом */ --line: rgba(245, 225, 190, 0.07); --line-strong: rgba(245, 225, 190, 0.14); /* Контент */ --ink: #F1ECE2; --ink-dim: #A89D8C; --ink-mute: #6F6557; /* Акцент — светлая производная от #0F8F6A для контраста на тёмном фоне */ --accent: #35C896; --accent-soft: rgba(53, 200, 150, 0.14); --accent-line: rgba(53, 200, 150, 0.34); --accent-glow: rgba(53, 200, 150, 0.45); /* Статусные — green/amber/blue оставлены как семантические сигналы; rose смещён в коралл, чтобы плашка «не назначен» не торчала холодом. */ --green: #5BE19E; --green-soft: rgba(91, 225, 158, 0.10); --amber: #FFB257; --amber-soft: rgba(255, 178, 87, 0.10); --rose: #FF8995; --rose-soft: rgba(255, 137, 149, 0.10); --blue: #6EA8FF; /* Тени — нейтрально-чёрные, работают на любой тёмной поверхности */ --shadow-lg: 0 30px 80px -20px rgba(0, 0, 0, 0.60), 0 8px 32px -10px rgba(0, 0, 0, 0.50); --shadow-md: 0 12px 32px -8px rgba(0, 0, 0, 0.50); /* Зерно и наложения */ --grain-opacity: 0.5; --grain-blend: overlay; /* Карта — синхронизирована с поверхностями bg-1/bg-2, линии дороги на тёплом cream-RGB */ --map-grid: rgba(245, 225, 190, 0.04); --map-road: rgba(245, 225, 190, 0.12); --map-road-2: rgba(245, 225, 190, 0.08); --map-bg-1: #221B16; --map-bg-2: #2C231D; /* ===== Слой концепта «тёплый терминал» (F1, 2026-06-03) ===== Добавлен аддитивно: старые экраны на --bg-0..3 не меняются, новые экраны строятся на этом словаре. Значения — из эталона concept_2026_06_warm_terminal.html (тёмная тема «эспрессо-терминал»). */ /* Вторая (яркая) производная акцента — для градиентов CTA и свечения. */ --accent-bright: #5BE6B4; --accent-grad: rgba(53, 200, 150, 0.07); /* Семантические поверхности (надстройка над числовой лесенкой --bg-0..3) */ --surface: #1F1812; /* фон карточек/панелей */ --surface-raised: #271F17; /* приподнятая поверхность: модалки, поповеры */ --sunken: #120E0A; /* утопленная: инпуты, секции-«ванны» */ --bg-page: #16120D; /* фон холста страницы */ --bg-grad-1: #211A13; /* тёплое радиальное пятно атмосферы (верх) */ --bg-grad-2: #13100B; /* тёплое радиальное пятно атмосферы (низ) */ /* Тёмная рельса навигации (контраст «терминала») */ --rail: #120E0A; --rail-ink: #EDE7D9; --rail-ink-dim: #8A8071; --line-rail: rgba(245, 225, 190, 0.07); /* Доп. статусный цвет + мягкие подложки violet/blue */ --violet: #B79BFF; --violet-soft: rgba(183, 155, 255, 0.14); --blue-soft: rgba(110, 168, 255, 0.14); /* «Карточные» тени концепта (мягче и теплее, чем --shadow-lg/md) */ --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 18px 40px -22px rgba(0, 0, 0, 0.7), 0 4px 12px -6px rgba(0, 0, 0, 0.5); --shadow-pop: 0 40px 90px -30px rgba(0, 0, 0, 0.75), 0 10px 30px -12px rgba(0, 0, 0, 0.6); } /* ===== Светлая тема — по системе ОС ===== * Применяется, если пользователь НЕ сделал явный выбор. Селектор * `:root:not([data-theme])` имеет специфичность 0,2,0 — это **выше** * предыдущего дефолта `:root:not([data-theme])` (0,2,0), но они равны, * поэтому media-правило побеждает за счёт более позднего объявления. * Явный выбор (`:root[data-theme="dark"]`) тоже 0,2,0 и идёт ПОСЛЕ * media — продолжает побеждать. */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { --bg-0: #FAF7F1; --bg-1: #F2EEE5; --bg-2: #E8E3D6; --bg-3: #DCD5C4; --line: rgba(20, 18, 12, 0.07); --line-strong: rgba(20, 18, 12, 0.14); --ink: #1A1815; --ink-dim: #6B6860; --ink-mute: #A9A498; /* F1: акцент выверен под концепт — глубокая база + яркая производная. Раньше базой был #0F8F6A (теперь это ≈ --accent-bright). */ --accent: #0B7351; --accent-soft: rgba(12, 122, 87, 0.10); --accent-line: rgba(12, 122, 87, 0.32); --accent-glow: rgba(15, 163, 116, 0.30); --green: #178A52; --green-soft: rgba(23, 138, 82, 0.10); --amber: #B97308; --amber-soft: rgba(185, 115, 8, 0.12); --rose: #C8364A; --rose-soft: rgba(200, 54, 74, 0.10); --blue: #2E6FD9; --shadow-lg: 0 30px 60px -25px rgba(60, 40, 20, 0.18), 0 8px 24px -10px rgba(60, 40, 20, 0.10); --shadow-md: 0 12px 24px -10px rgba(60, 40, 20, 0.12); --grain-opacity: 0.30; --grain-blend: multiply; --map-grid: rgba(0, 0, 0, 0.05); --map-road: rgba(0, 0, 0, 0.15); --map-road-2: rgba(0, 0, 0, 0.08); --map-bg-1: #ECE6D8; --map-bg-2: #DCD5C4; /* ===== Слой концепта «тёплый терминал» (F1) — светлая «тёплая бумага» ===== */ --accent-bright: #0FA374; --accent-grad: rgba(15, 163, 116, 0.07); --surface: #FBFAF6; --surface-raised: #FFF; --sunken: #F2EDE2; --bg-page: #E9E3D5; --bg-grad-1: #F1ECE1; --bg-grad-2: #E4DCCB; --rail: #211C16; --rail-ink: #EDE7D9; --rail-ink-dim: #8C8472; --line-rail: rgba(245, 235, 210, 0.09); --violet: #7A52C8; --violet-soft: rgba(122, 82, 200, 0.12); --blue-soft: rgba(46, 111, 217, 0.12); --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 12px 28px -16px rgba(60, 42, 20, 0.30), 0 2px 6px -3px rgba(60, 42, 20, 0.18); --shadow-pop: 0 30px 70px -28px rgba(50, 35, 15, 0.40), 0 8px 22px -10px rgba(50, 35, 15, 0.20); } } /* ===== Светлая тема — явный пользовательский выбор ===== * Дублирует значения внутри @media-блока — это вынужденный CSS-конструкт: * `@media` нельзя поместить в список селекторов, а нужно покрыть оба * сценария «system=light + no choice» и «system=any + explicit light». * Раньше также было `:root {}` с тёмными значениями (дубль) — этот * куст убран в задаче 86 (F5), темные значения теперь живут только в * групповом селекторе выше. */ :root[data-theme="light"] { --bg-0: #FAF7F1; --bg-1: #F2EEE5; --bg-2: #E8E3D6; --bg-3: #DCD5C4; --line: rgba(20, 18, 12, 0.07); --line-strong: rgba(20, 18, 12, 0.14); --ink: #1A1815; --ink-dim: #6B6860; --ink-mute: #A9A498; /* F1: акцент выверен под концепт — глубокая база + яркая производная. Раньше базой был #0F8F6A (теперь это ≈ --accent-bright). */ --accent: #0B7351; --accent-soft: rgba(12, 122, 87, 0.10); --accent-line: rgba(12, 122, 87, 0.32); --accent-glow: rgba(15, 163, 116, 0.30); --green: #178A52; --green-soft: rgba(23, 138, 82, 0.10); --amber: #B97308; --amber-soft: rgba(185, 115, 8, 0.12); --rose: #C8364A; --rose-soft: rgba(200, 54, 74, 0.10); --blue: #2E6FD9; --shadow-lg: 0 30px 60px -25px rgba(60, 40, 20, 0.18), 0 8px 24px -10px rgba(60, 40, 20, 0.10); --shadow-md: 0 12px 24px -10px rgba(60, 40, 20, 0.12); --grain-opacity: 0.30; --grain-blend: multiply; --map-grid: rgba(0, 0, 0, 0.05); --map-road: rgba(0, 0, 0, 0.15); --map-road-2: rgba(0, 0, 0, 0.08); --map-bg-1: #ECE6D8; --map-bg-2: #DCD5C4; /* ===== Слой концепта «тёплый терминал» (F1) — светлая «тёплая бумага» ===== */ --accent-bright: #0FA374; --accent-grad: rgba(15, 163, 116, 0.07); --surface: #FBFAF6; --surface-raised: #FFF; --sunken: #F2EDE2; --bg-page: #E9E3D5; --bg-grad-1: #F1ECE1; --bg-grad-2: #E4DCCB; --rail: #211C16; --rail-ink: #EDE7D9; --rail-ink-dim: #8C8472; --line-rail: rgba(245, 235, 210, 0.09); --violet: #7A52C8; --violet-soft: rgba(122, 82, 200, 0.12); --blue-soft: rgba(46, 111, 217, 0.12); --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 12px 28px -16px rgba(60, 42, 20, 0.30), 0 2px 6px -3px rgba(60, 42, 20, 0.18); --shadow-pop: 0 30px 70px -28px rgba(50, 35, 15, 0.40), 0 8px 22px -10px rgba(50, 35, 15, 0.20); } /* ===== Радиусы и геометрия ===== * Единый источник истины для скруглений всего интерфейса. На эти токены * опираются .card, модалки, инпуты, кнопки, dropdown'ы и десятки page-owned * правил, поэтому уменьшение значений здесь делает скругления компактнее * по всему сайту разом, без правок компонентных стилей. Шкала намеренно * тесная: блоки выглядят аккуратно-строгими, а не «мягко-пузатыми». */ :root { /* Action-акцент для залитых CTA/активных вкладок. Отдельный от --accent: обычный --accent остаётся ярче для фокусов, ссылок и статусных точек, а залитые элементы получают гарантированно читаемый светлый текст. */ --accent-action: #075C40; --accent-action-bright: #087A55; --on-accent: #F2EEE5; --on-accent-muted: rgba(242, 238, 229, 0.68); --radius-s: 5px; --radius-m: 8px; --radius-l: 12px; --radius-xl: 16px; /* F1: алиасы геометрии под словарь концепта (--r-*). Указывают на те же --radius-*, чтобы геометрия имела единый источник истины: концепт рисовал 6/9/13/18, но боевая шкала намеренно ужата до 5/8/12/16 (задача 260603-06) — её и держим. Плюс pill-радиус и единая кривая анимаций из концепта. */ --r-s: var(--radius-s); --r-m: var(--radius-m); --r-l: var(--radius-l); --r-xl: var(--radius-xl); --r-pill: 999px; --ease: cubic-bezier(0.32, 0.72, 0, 1); }