/* ============================================================ mimo.VPN — Design System "Liquid Ember" tokens.css · Единый источник правды дизайн-токенов Версия 1.0 · iOS 26 Liquid Glass · Terracotta Premium ============================================================ */ :root { /* ---------------------------------------------------------- 1. ЦВЕТ — Терракотовая угольная палитра (Ember Scale) Тёплая терракота, выжженная до премиального глубокого тона ---------------------------------------------------------- */ --ember-50: #FDF3EF; --ember-100: #FAE1D7; --ember-200: #F4C0AD; --ember-300: #EC9D83; --ember-400: #E27A58; /* ← ядро бренда: живая терракота */ --ember-500: #D4623D; /* ← основной акцент, кнопки, свечения */ --ember-600: #B84E30; /* ← глубокая терракота, градиенты */ --ember-700: #963D24; /* ← выжженная, тени и обводки */ --ember-800: #752F1C; --ember-900: #572315; /* ---------------------------------------------------------- 2. ЦВЕТ — Тёмный премиальный фон (Night Scale) Тёплый почти-чёрный с кофейно-костряковым подтоном. Никогда не холодный серый — всегда с терракотовым дыханием. ---------------------------------------------------------- */ --night-950: #0B0908; /* ← базовый холст приложения */ --night-900: #12100E; /* ← приподнятые поверхности */ --night-800: #1A1614; /* ← карточки */ --night-700: #241E1B; /* ← карточки 2-го уровня */ --night-600: #322925; /* ← разделители, ховеры */ /* ---------------------------------------------------------- 3. ЦВЕТ — Текст (тёплый белый на тёмном) ---------------------------------------------------------- */ --text-primary: #F4EFEA; /* заголовки */ --text-secondary: rgba(244, 239, 234, 0.62); /* основной */ --text-tertiary: rgba(244, 239, 234, 0.38); /* подписи */ --text-quaternary: rgba(244, 239, 234, 0.22); /* следы */ --text-on-ember: #FFF6F1; /* на терракоте */ /* Семантические состояния */ --status-on: var(--ember-400); /* защищено */ --status-off: rgba(244,239,234,0.45); /* не защищено */ --status-warn: #E8B14E; /* предупреждение */ --status-crit: #E05252; /* критическая ошибка */ --status-fast: #7FC98F; /* хороший пинг */ /* ---------------------------------------------------------- 4. ЖИДКОЕ СТЕКЛО — оптические токены Стекло живёт светом: заливка + кромка + блик + тень ---------------------------------------------------------- */ --glass-fill-hi: rgba(255, 255, 255, 0.10); /* верх градиента */ --glass-fill-lo: rgba(255, 255, 255, 0.035); /* низ градиента */ --glass-fill-pressed: rgba(255, 255, 255, 0.055); --glass-edge: rgba(255, 255, 255, 0.14); /* кромка по периметру*/ --glass-edge-hi: rgba(255, 255, 255, 0.30); /* верхняя кромка */ --glass-specular: rgba(255, 255, 255, 0.26); /* верхний блик */ --glass-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.45), 0 4px 16px rgba(0, 0, 0, 0.30); --glass-shadow-soft: 0 12px 32px -8px rgba(0, 0, 0, 0.35); /* Стекло с терракотовым дыханием (активное состояние) */ --ember-glass-fill-hi: rgba(226, 122, 88, 0.34); --ember-glass-fill-lo: rgba(150, 61, 36, 0.16); --ember-glass-edge: rgba(244, 192, 173, 0.38); --ember-glow-sm: 0 0 24px rgba(212, 98, 61, 0.45); --ember-glow-md: 0 0 48px rgba(212, 98, 61, 0.38), 0 0 96px rgba(226,122,88,0.22); --ember-glow-lg: 0 0 72px rgba(226, 122, 88, 0.50), 0 0 160px rgba(212, 98, 61, 0.32), 0 0 280px rgba(184, 78, 48, 0.20); /* Уровни размытия (иерархия стекла) */ --blur-thin: 16px; /* чипы, бейджи */ --blur-regular: 28px; /* карточки, таб-бар */ --blur-thick: 48px; /* шиты, оверлеи, кнопка */ --glass-saturate: 180%; /* ---------------------------------------------------------- 5. ТИПОГРАФИКА — Apple SF Pro + резерв Inter На устройствах Apple рендерится нативный SF Pro Display/Text, в остальных средах — Inter (геометрический двойник SF). ---------------------------------------------------------- */ --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "SF Pro", var(--font-inter, "Inter"), "Helvetica Neue", "Segoe UI", system-ui, sans-serif; --font-mono: ui-monospace, "SF Mono", "SF Mono Medium", var(--font-jet, "JetBrains Mono"), "Cascadia Mono", "Roboto Mono", monospace; /* iOS-шкала размеров (pt → px 1:1) */ --fs-large-title: 34px; /* 700, tracking -0.8px — экраны */ --fs-title-1: 28px; /* 700, tracking -0.6px */ --fs-title-2: 22px; /* 700, tracking -0.4px */ --fs-title-3: 20px; /* 600, tracking -0.3px */ --fs-headline: 17px; /* 600 — акцентные строки */ --fs-body: 17px; /* 400 — основной текст */ --fs-callout: 16px; /* 400 */ --fs-subheadline: 15px; /* 400 — вторичный текст */ --fs-footnote: 13px; /* 400 — подписи */ --fs-caption: 12px; /* 400 — микро-подписи */ --fs-micro: 10px; /* 600, caps — ярлыки */ --tracking-display: -0.022em; /* крупная типографика */ --tracking-body: -0.011em; /* 17px текст */ --tracking-caps: 0.08em; /* MICRO-ярлыки */ /* ---------------------------------------------------------- 6. РАДИУСЫ — мягкая скульптурность iOS ---------------------------------------------------------- */ --radius-xs: 8px; /* бейджи, мини-чипы */ --radius-sm: 12px; /* чипы, маленькие карточки */ --radius-md: 16px; /* строки списков */ --radius-lg: 22px; /* карточки */ --radius-xl: 28px; /* крупные панели */ --radius-2xl: 36px; /* hero-блоки */ --radius-full: 9999px; /* ---------------------------------------------------------- 7. ОТСТУПЫ — 4pt сетка, эргономика большого пальца ---------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --tap-min: 44px; /* минимальная зона касания (HIG) */ --tap-comfort: 52px; /* комфортная зона */ --screen-pad-x: 22px; /* боковые поля экрана */ /* ---------------------------------------------------------- 8. МОЦИОН — пружины iOS ---------------------------------------------------------- */ --ease-ios: cubic-bezier(0.32, 0.72, 0, 1); /* вход/выход iOS */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* упругий отскок */ --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 180ms; /* нажатия, ховеры */ --dur-base: 320ms; /* переходы элементов */ --dur-slow: 560ms; /* смена экранов */ --dur-cinematic: 900ms; /* зажигание кнопки */ --loop-breathe: 3.4s; /* дыхание свечения */ --loop-aurora: 18s; /* дрейф авроры */ /* ---------------------------------------------------------- 9. СВЕЧЕНИЕ И ГЛУБИНА ---------------------------------------------------------- */ --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.25); --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.30); --shadow-3: var(--glass-shadow); --inner-top-light: inset 0 1px 0 rgba(255, 255, 255, 0.18); --inner-pressed: inset 0 2px 8px rgba(0, 0, 0, 0.35); /* Уровни наложения */ --z-bg: 0; /* аврора-фон */ --z-glass-bg: 1; /* стеклянные слои */ --z-content: 10; /* контент */ --z-hero: 20; /* кнопка питания */ --z-tabbar: 40; /* навигация */ --z-overlay: 60; /* шиты, модалки */ /* Живые сущности — прокидываем в Tailwind как утилиты bg/text/border */ --background: var(--night-950); --foreground: var(--text-primary); --primary: var(--ember-500); --primary-foreground: var(--text-on-ember); --card: rgba(26, 22, 20, 0.6); --card-foreground: var(--text-primary); --border: rgba(255, 255, 255, 0.08); --ring: var(--ember-400); --muted: rgba(255, 255, 255, 0.06); --muted-foreground: var(--text-secondary); --accent: rgba(226, 122, 88, 0.14); --accent-foreground: var(--ember-300); }