/* ============================================================================ ЗАРЯ — токены ---------------------------------------------------------------------------- Единственное место, где заданы цвета, шрифты, размеры и тайминги. Дальше по проекту — только var(). Сайт живёт в двух состояниях: ночь (неон работает) и день (то же стекло, погашенное). Состояние выбирает НЕ сайт, а операционная система: тёмная тема на телефоне или в Windows — ночь, светлая — день. Своего переключателя нет намеренно: человек уже сказал системе, как ему удобно смотреть, и спрашивать второй раз незачем. Меняются ТОЛЬКО переменные слоя «сцена». Цвета газа не меняются никогда: газ горит одинаково, меняется только свет вокруг него. ============================================================================ */ :root { /* --- Газы. Это товар, а не палитра интерфейса. Не использовать для текста, рамок и фона: только для свечения трубок ---------------- */ --gas-neon: #FF4D1C; /* чистый неон, оранжево-красный */ --gas-ruby: #FF2D6F; /* неон + красное стекло */ --gas-pink: #FF3DB8; /* аргон + розовый люминофор */ --gas-ice: #35D6F5; /* аргон-ртуть, холодный голубой */ --gas-mint: #37F5A3; /* аргон + зелёный люминофор */ --gas-violet: #9B6BFF; /* аргон + фиолетовый люминофор */ --gas-warm: #FFC46B; /* «тёплый белый», аргон + янтарь */ --gas-white: #E8F4FF; /* холодный белый */ /* --- Бренд. ЗАРЯ = зарево на рассвете: тёплый оранжевый ----------------- */ --c-brand: #FF4D1C; --c-brand-soft: #FF8A4C; /* --- Стекло: цвет незажжённой трубки ------------------------------------ */ --c-glass: #9AA3AE; --c-glass-hi: #E6EAEF; --c-glass-shade: #5A6470; /* --- Типографика -------------------------------------------------------- */ --f-display: Bahnschrift, "DIN Condensed", "Archivo Narrow", "Roboto Condensed", "Segoe UI Semibold", system-ui, sans-serif; --f-text: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --f-mono: "Cascadia Mono", Consolas, ui-monospace, "SF Mono", Menlo, monospace; /* Шкала. clamp() вместо медиазапросов на размер: один размер на все экраны */ --t-hero: clamp(3.2rem, 12vw, 8.5rem); --t-h2: clamp(2rem, 5.2vw, 3.6rem); --t-h3: clamp(1.3rem, 2.6vw, 1.75rem); --t-lead: clamp(1.05rem, 1.9vw, 1.35rem); --t-body: 1rem; --t-small: 0.875rem; --t-micro: 0.75rem; --lh-tight: 0.94; --lh-head: 1.12; --lh-text: 1.65; --tracking-wide: 0.16em; --tracking-micro: 0.22em; /* --- Ритм. Все отступы кратны 4px --------------------------------------- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem; --section-y: clamp(4rem, 9vw, 8rem); --gutter: clamp(1.15rem, 4vw, 3rem); --measure: 66ch; /* предел строки текста для читаемости */ --page: 82rem; /* предел ширины контента */ --radius-s: 4px; --radius: 10px; --radius-l: 18px; --radius-pill: 999px; /* --- Движение. Всё гасится в prefers-reduced-motion --------------------- */ --e-out: cubic-bezier(0.22, 1, 0.36, 1); --e-in-out: cubic-bezier(0.65, 0, 0.35, 1); --d-fast: 0.18s; --d-base: 0.32s; --d-slow: 0.7s; /* Рубильник день/ночь. Свет в комнате не выключается щелчком — он уходит. Отсюда длинный ход и синусоидальная кривая: без резкого старта и без резкой остановки, поэтому переход не бросается в глаза, а замечается. */ --d-switch: 0.85s; --e-switch: cubic-bezier(0.37, 0, 0.63, 1); /* плавно из покоя в покой */ --focus-w: 3px; --z-bg: 0; --z-body: 1; --z-sticky: 50; --z-header: 100; --z-modal: 200; } /* ============================ НОЧЬ (база) ================================= База — тёмная: неоновая мастерская показывает товар в работе. Светлая версия ниже включается только по системной настройке. */ :root { /* Говорим браузеру, в какой схеме он рисует СВОИ элементы: раскрытый список