/* ===== Токены дизайн-системы ===== Единственное место, где объявлены цвет, размер и время. Если значение понадобилось в компоненте — оно берётся отсюда, а не пишется числом. Тема переключается атрибутом data-tone на . Флип происходит ровно один раз за страницу, на переходе в космос, и обратно не возвращается: двойная смена света читается как неисправность, а не как приём. */ :root, [data-tone="light"] { /* Бумага и чернила. Бумага тёплая, а не голубая: холодный светлый фон тянет за собой эстетику SaaS-лендинга, от которой мы уходим. */ --paper: #f2f0ec; --paper-2: #e9e6e0; --ink: #0b0d10; /* 17.10:1 на бумаге */ --ink-2: #565c63; /* 5.94:1 — вторичный текст */ --border: #d5d1ca; --rule: rgba(11, 13, 16, 0.09); --plate: rgba(242, 240, 236, 0.86); /* подложка текста поверх фотографии */ /* Акцент один. Он объявлен парой значений не ради красоты: ни один оттенок не даёт 4.5:1 одновременно на светлом и на тёмном фоне. Здесь один тон (14° по HSL) при двух светлотах. */ --accent: #b03612; /* 5.45:1 на бумаге */ --shadow: none; /* теней в системе нет, границы держат линейки */ } [data-tone="dark"] { --paper: #0b0d10; --paper-2: #12161b; --ink: #f2f0ec; /* 17.10:1 */ --ink-2: #a2a9b2; /* 8.20:1 */ --border: #262c35; --rule: rgba(242, 240, 236, 0.10); --plate: rgba(11, 13, 16, 0.72); --accent: #ff7043; /* 7.09:1 на тёмном */ } :root { /* Типографика. Иерархия строится кеглем, весов ровно два: 400 и 500. Третий регистр — не третий вес, а моноширинный капс с разрядкой: на кириллице нет латинских выносных элементов, за которые цепляется глаз, и одним начертанием подзаголовок от лида не отличить. */ --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; --fs-name: clamp(3.5rem, 11vw, 10.5rem); --fs-h1: clamp(2.25rem, 5.2vw, 4.75rem); --fs-h2: clamp(1.75rem, 3.2vw, 2.75rem); --fs-h3: 1.5rem; --fs-lead: clamp(1.1875rem, 1.5vw, 1.5rem); --fs-body: 1.0625rem; --fs-small: 0.9375rem; --fs-label: 0.75rem; --fs-meta: 0.8125rem; /* Сетка. 1440, а не шире: это модальная ширина ноутбука, на котором страницу и откроют. */ --max: 1440px; --cols: 12; --gutter: 24px; --pad: clamp(20px, 4vw, 32px); /* Ритм. Всё кратно 8. */ --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 40px; --sp-5: 64px; --sp-6: 96px; --sp-section: clamp(96px, 13vh, 160px); /* Скругления: 2px на том, что нажимают, 0 на всём остальном. Значения 999px в системе не существует. */ --radius: 2px; /* Движение. Один easing на всё, чтобы страница ощущалась одним предметом. */ --ease: cubic-bezier(0.2, 0, 0, 1); --t-fast: 180ms; --t-base: 420ms; --t-slow: 600ms; /* Прогресс скролла: пишется из scene.js один раз за кадр. Всё поведение сцен выводится из этого одного числа. */ --p: 0; }