/* tokens.css — единственный источник дизайн-токенов фабрики. * * ОТКУДА: палитра, типографика и радиусы выросли из 04-frontend/nextjs-admin/app/globals.css * (админка PLIO). Здесь они дополнены тем, чего там не было: токенами стекла по ярусам * и шкалой глубины. * * ЧТО ПЕРЕПИСАТЬ ПОД СВОЙ ПРОЕКТ: --accent и --accent-2. Всё остальное — нейтральная * база фабрики, её лучше не трогать: она даёт двадцати продуктам общее лицо. * * Тёмная тема включается классом .dark на ИЛИ системной настройкой * (см. блок prefers-color-scheme внизу). Класс сильнее системы. */ :root { /* ── База: едва тёплый белый, как бумага ─────────────────────────────── */ --bg: #fafaf7; --bg-2: #f3f3ee; --surface: #ffffff; /* ── Чернила ─────────────────────────────────────────────────────────── */ --ink: #1a1a1c; --ink-2: #3c3c43; --ink-3: #6b6b73; --ink-4: #a8a8af; /* ── Акцент — единственный цвет продукта. Меняется под проект. ────────── */ --accent: #ff3b30; --accent-2: #ff6b3b; /* ── Системные сигналы (Apple HIG) ───────────────────────────────────── */ --blue: #0066cc; --green: #248a3d; --orange: #c84c0c; --gray: #6b6b73; /* ── Стекло ────────────────────────────────────────────────────────────── * Матовость (frost) одинакова на всех ярусах — это НЕ украшение, а условие * незаметного переключения: скрипт повышает ярус после гидратации, и если бы * вместе с преломлением менялась и матовость, пользователь видел бы моргание * материала. Меняется только линза. Подробности — README, § «Лестница». */ --glass-tint: rgba(255, 255, 255, 0.55); /* базовая заливка поверхности */ --glass-tint-2: rgba(255, 255, 255, 0.85); /* плотнее: модалки, панели */ --glass-blur: 30px; --glass-blur-2: 60px; /* парящие слои */ --glass-sat: 170%; --glass-border: rgba(0, 0, 0, 0.06); /* Кромка (rim): блик по краю, который читается как толщина стекла. * Чистый CSS, работает везде — поэтому живёт на всех ярусах, кроме solid. */ --rim-light: rgba(255, 255, 255, 0.85); --rim-dark: rgba(0, 0, 0, 0.04); /* Линза: сила преломления в пикселях. Больше 90 — «рыбий глаз» и рябь текста. */ --lens-scale: 62; --lens-band: 0.42; /* доля половины меньшей стороны, занятая кромкой */ /* Непрозрачная замена стекла — ярус solid. * Не «серый прямоугольник», а честная поверхность: если прозрачность * недоступна, интерфейс обязан остаться таким же читаемым. */ --solid: #ffffff; --solid-2: #f7f7f4; /* ── Радиусы ─────────────────────────────────────────────────────────── */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px; --radius-pill: 999px; /* ── Глубина ───────────────────────────────────────────────────────────── * Тренд 2026 — не стекло само по себе, а слоистость: чем выше слой, тем * сильнее размытие фона и мягче тень. Стекло без глубины читается наклейкой. */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-overlay: 1000; --z-modal: 1100; --z-toast: 1200; --shadow-sm: 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.02); --shadow-md: 0 6px 20px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.03); --shadow-lg: 0 20px 50px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.04); --shadow-xl: 0 40px 90px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.06); /* ── Движение ────────────────────────────────────────────────────────── */ --ease: cubic-bezier(.4, 0, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --dur-fast: .15s; --dur: .25s; --dur-slow: .55s; } .dark { --bg: #0c0c0e; --bg-2: #131316; --surface: #1a1a1d; --ink: #f7f7f5; --ink-2: #d8d8dc; --ink-3: #8e8e93; --ink-4: #48484c; --accent: #ff453a; --accent-2: #ff7a45; --blue: #0a84ff; --green: #30d158; --orange: #ff9f0a; --gray: #8e8e93; --glass-tint: rgba(255, 255, 255, 0.05); --glass-tint-2: rgba(28, 28, 32, 0.70); --glass-border: rgba(255, 255, 255, 0.08); --rim-light: rgba(255, 255, 255, 0.22); --rim-dark: rgba(0, 0, 0, 0.35); --solid: #1a1a1d; --solid-2: #202024; --shadow-sm: 0 1px 3px rgba(0,0,0,.4); --shadow-md: 0 6px 20px rgba(0,0,0,.45); --shadow-lg: 0 20px 50px rgba(0,0,0,.55); --shadow-xl: 0 40px 90px rgba(0,0,0,.65); } /* Системная тёмная тема — только если проект не выставил класс сам. * :root:not(.light) даёт пользователю возможность зафиксировать светлую. */ @media (prefers-color-scheme: dark) { :root:not(.light):not(.dark) { --bg: #0c0c0e; --bg-2: #131316; --surface: #1a1a1d; --ink: #f7f7f5; --ink-2: #d8d8dc; --ink-3: #8e8e93; --ink-4: #48484c; --accent: #ff453a; --accent-2: #ff7a45; --blue: #0a84ff; --green: #30d158; --orange: #ff9f0a; --glass-tint: rgba(255, 255, 255, 0.05); --glass-tint-2: rgba(28, 28, 32, 0.70); --glass-border: rgba(255, 255, 255, 0.08); --rim-light: rgba(255, 255, 255, 0.22); --rim-dark: rgba(0, 0, 0, 0.35); --solid: #1a1a1d; --solid-2: #202024; --shadow-sm: 0 1px 3px rgba(0,0,0,.4); --shadow-md: 0 6px 20px rgba(0,0,0,.45); --shadow-lg: 0 20px 50px rgba(0,0,0,.55); --shadow-xl: 0 40px 90px rgba(0,0,0,.65); } } /* ── Типографика Apple HIG ──────────────────────────────────────────────── * Размеры и трекинг — не вкусовщина: это шкала, на которой держится * узнаваемость. Новые размеры не добавлять, брать ближайший. */ .t-largetitle { font-size: clamp(34px, 5vw, 56px); font-weight: 700; letter-spacing: -.028em; line-height: 1.04; } .t-title-1 { font-size: clamp(26px, 3.4vw, 34px); font-weight: 700; letter-spacing: -.021em; line-height: 1.12; } .t-title-2 { font-size: 22px; font-weight: 600; letter-spacing: -.018em; line-height: 1.18; } .t-title-3 { font-size: 18px; font-weight: 600; letter-spacing: -.015em; line-height: 1.20; } .t-headline { font-size: 15px; font-weight: 600; letter-spacing: -.012em; line-height: 1.30; } .t-body { font-size: 15px; font-weight: 400; letter-spacing: -.010em; line-height: 1.47; } .t-callout { font-size: 14px; font-weight: 400; letter-spacing: -.008em; line-height: 1.45; } .t-subhead { font-size: 13px; font-weight: 400; letter-spacing: -.005em; line-height: 1.40; } .t-footnote { font-size: 12px; font-weight: 500; letter-spacing: .005em; line-height: 1.35; } .t-caption { font-size: 11px; font-weight: 500; letter-spacing: .015em; line-height: 1.30; text-transform: uppercase; } .t-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; letter-spacing: -.03em; }