/** * YakutVPN Design System v4 — AURORA * Северное сияние + редакторский дизайн + spatial UI * * 🛑 ОДИН ЯЗЫК НА ТРИ ПОВЕРХНОСТИ (2026-09-09). До этой правки лендинг, * кабинет и приложение жили на ТРЁХ РАЗНЫХ палитрах: здесь зелёная #5CD1A3, * в кабинете сине-золотая #49C8F3, в приложении бирюзово-фиолетовая #39D1C2. * Человек, прошедший лендинг → кабинет → приложение, видел три разных * продукта и ни разу не увидел один. * * 🛑 ИМЕНА ПЕРЕМЕННЫХ НЕ МЕНЯЛИСЬ НАМЕРЕННО — их 365 употреблений только в * main-page.css. Переименование ради красоты дало бы дифф, в котором не * видно смысловых правок. * * 🛑 ЦВЕТА НЕ ПОДБИРАЛИСЬ НА ГЛАЗ. Шесть акцентов посчитаны в OKLCH при ОДНОЙ * светлоте и цветности (L .78 / C .125) — меняется только тон. Поэтому * контраст к фону у всех шести лежит в узкой полосе 9.4–10.5:1, и они звучат * в один голос. Добавляешь седьмой — считай по той же формуле, а не подбирай * похожий hex: один выбившийся акцент разваливает набор целиком. * Зеркало этих же значений для приложения — lib/theme/aurora.dart. */ :root { /* ═══ ПАЛИТРА: AURORA v4 ═══ */ /* Поверхности — полярная ночь, один тон 265°, растёт только светлота. */ --a-void: #050A16; --a-deep: #0D1321; --a-nebula: #192030; --a-surface: #252E3F; --a-elevated: #333C4F; /* Акценты. Тон в комментарии — чтобы следующий считался по той же формуле. */ --a-green: #5CD1A3; /* h 165 · защищено */ --a-teal: #39D1C2; /* h 185 · бренд, действие */ --a-cyan: #49C8F3; /* h 225 · сведения */ --a-purple: #BDA7FF; /* h 295 · платный тариф */ --a-pink: #BDA7FF; /* розового в v4 нет — сведён к фиолету */ --a-red: #FD9693; /* h 22 · отказ */ --a-yellow: #E1AE51; /* h 80 · внимание */ --a-green-soft: rgba(92, 209, 163, 0.13); --a-teal-soft: rgba(57, 209, 194, 0.13); --a-purple-soft: rgba(189, 167, 255, 0.13); --a-pink-soft: rgba(189, 167, 255, 0.13); --a-cyan-soft: rgba(73, 200, 243, 0.13); /* Стекло: заливка, рамка и ВНУТРЕННЯЯ СВЕТЛАЯ ЛИНИЯ сверху. Линия — не украшение: именно она даёт материалу толщину. */ --a-glass: rgba(255, 255, 255, 0.05); --a-glass-edge: rgba(255, 255, 255, 0.10); --a-glass-top: rgba(255, 255, 255, 0.13); --a-pure: #FFFFFF; --a-bright: #E4E8EF; --a-dim: #B1B6C0; --a-fade: #878C97; --a-ghost: #5E636E; --a-success: var(--a-green); --a-warning: var(--a-yellow); --a-danger: var(--a-red); --a-info: var(--a-cyan); --a-premium: var(--a-purple); /* ═══ ТИПОГРАФИКА ═══ */ /* Кириллица здесь РОДНАЯ, а не подставная латиница. Дисплейный шрифт — только герой и крупные числа; моношрифт у показаний функционален (табличные цифры не дёргают соседей при смене разряда). */ --a-font-display: 'Unbounded', system-ui, sans-serif; --a-font-sans: 'Onest', -apple-system, 'Segoe UI', system-ui, sans-serif; --a-font-mono: 'JetBrains Mono', 'SF Mono', 'Menlo', monospace; --a-text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.85rem); --a-text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem); --a-text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem); --a-text-md: clamp(1.125rem, 1rem + 0.6vw, 1.375rem); --a-text-lg: clamp(1.5rem, 1.2rem + 1.5vw, 2rem); --a-text-xl: clamp(2rem, 1.5rem + 2.5vw, 3rem); --a-text-2xl: clamp(2.5rem, 2rem + 3vw, 4rem); --a-text-3xl: clamp(3rem, 2rem + 5vw, 5.5rem); --a-display: clamp(3.5rem, 2rem + 8vw, 9rem); --a-mega: clamp(4.5rem, 3rem + 12vw, 12rem); --a-weight-light: 300; --a-weight-regular: 400; --a-weight-medium: 500; --a-weight-semi: 600; --a-weight-bold: 700; --a-weight-black: 900; --a-leading-none: 0.85; --a-leading-tight: 0.95; --a-leading-snug: 1.15; --a-leading-normal: 1.5; --a-leading-relaxed: 1.7; --a-tracking-tighter: -0.04em; --a-tracking-tight: -0.02em; --a-tracking-normal: 0; --a-tracking-wide: 0.04em; --a-tracking-wider: 0.12em; --a-tracking-widest: 0.24em; /* ═══ ПРОСТРАНСТВО ═══ */ --a-space-1: 4px; --a-space-2: 8px; --a-space-3: 12px; --a-space-4: 16px; --a-space-5: 20px; --a-space-6: 24px; --a-space-8: 32px; --a-space-10: 40px; --a-space-12: 48px; --a-space-16: 64px; --a-space-20: 80px; --a-space-24: 96px; --a-space-32: 128px; --a-space-40: 160px; --a-container: 1280px; --a-container-md: 960px; --a-container-sm: 640px; --a-padding: clamp(1rem, 3vw, 2.5rem); /* ═══ РАДИУСЫ ═══ */ --a-radius-sm: 8px; --a-radius-md: 12px; --a-radius-lg: 20px; --a-radius-xl: 28px; --a-radius-2xl: 40px; --a-radius-full: 9999px; /* ═══ ТЕНИ ═══ */ --a-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); --a-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4); --a-shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.5); --a-shadow-xl: 0 40px 80px rgba(0, 0, 0, 0.6); --a-glow-green: 0 0 40px rgba(92, 209, 163, 0.4), 0 0 80px rgba(92, 209, 163, 0.2); --a-glow-purple: 0 0 40px rgba(189, 167, 255, 0.4), 0 0 80px rgba(189, 167, 255, 0.2); --a-glow-pink: 0 0 40px rgba(189, 167, 255, 0.4), 0 0 80px rgba(189, 167, 255, 0.2); --a-glow-cyan: 0 0 40px rgba(73, 200, 243, 0.4), 0 0 80px rgba(73, 200, 243, 0.2); --a-card-glow-green: 0 20px 60px -20px rgba(92, 209, 163, 0.5); --a-card-glow-purple: 0 20px 60px -20px rgba(189, 167, 255, 0.5); --a-card-glow-pink: 0 20px 60px -20px rgba(189, 167, 255, 0.5); /* ═══ АНИМАЦИИ ═══ */ --a-duration-instant: 100ms; --a-duration-fast: 200ms; --a-duration-base: 400ms; --a-duration-slow: 700ms; --a-duration-slower: 1200ms; --a-duration-aurora: 8000ms; --a-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --a-ease-in: cubic-bezier(0.7, 0, 0.84, 0); --a-ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1); /* та же, что в приложении */ --a-ease-soft: cubic-bezier(0.4, 0, 0.2, 1); /* ═══ Z-INDEX ═══ */ --a-z-aurora: 0; --a-z-base: 1; --a-z-dropdown: 50; --a-z-sticky: 100; --a-z-modal: 500; --a-z-toast: 1000; --a-z-cursor: 9999; /* ═══ BLUR ═══ */ --a-blur-sm: 8px; --a-blur-md: 16px; --a-blur-lg: 32px; --a-blur-xl: 80px; --a-blur-2xl: 120px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }