/* ========================================================== Orvin VPN — токены оформления. ВСЕ цвета, шрифты и размеры живут здесь. Хочешь перекрасить приложение — правишь только этот файл, разметку не трогаешь. ========================================================== */ :root{ /* ---------- поверхности (тёмная тема) ---------- */ --void:#05070B; /* самый низ, фон страницы */ --surface:rgba(255,255,255,.028); /* обычная карточка */ --surface-2:rgba(255,255,255,.055); /* карточка при наведении */ --line:rgba(255,255,255,.075); /* тонкая граница */ --line-2:rgba(255,255,255,.14); /* заметная граница */ /* ---------- текст ---------- */ --text:#EEF3F8; /* основной */ --muted:#8B97A8; /* пояснения */ --dim:#5C6675; /* подписи, заголовки колонок */ /* ---------- акцент: холодный неон ---------- */ --accent:#5EE7C8; /* мята-бирюза, главный цвет бренда */ --accent-soft:#B9F7E7; /* светлый край градиента */ --accent-deep:#1FA98C; /* тёмный край градиента */ --accent-2:#7C6CFF; /* индиго, второй цвет для градиентов */ --accent-2-soft:#B3A9FF; --halo:rgba(94,231,200,.45); /* свечение вокруг акцентных кнопок */ --halo-2:rgba(124,108,255,.40); --on-accent:#04120E; /* текст поверх акцентной заливки */ --grad-accent:linear-gradient(140deg,var(--accent-soft) 0%,var(--accent) 42%,var(--accent-deep) 100%); --grad-duo:linear-gradient(135deg,var(--accent) 0%,var(--accent-2) 100%); /* ---------- статусы ---------- */ --good:#6FCF97; --warn:#E2A05B; --bad:#E0776B; --info:#8FB4DE; /* ---------- стекло ---------- */ --glass-bg:linear-gradient(177deg,rgba(255,255,255,.085) 0%,rgba(255,255,255,.032) 46%,rgba(255,255,255,.05) 100%); --glass-line:rgba(255,255,255,.115); --glass-lip:inset 0 1px 0 rgba(255,255,255,.26), inset 0 -1px 0 rgba(255,255,255,.06); --glass-drop:0 24px 60px -28px rgba(0,0,0,.9), 0 2px 10px -4px rgba(0,0,0,.6); --blur:blur(26px) saturate(185%); /* ---------- фон страницы ---------- */ --aura: radial-gradient(120% 58% at 50% -12%, rgba(124,108,255,.22) 0%, rgba(0,0,0,0) 58%), radial-gradient(78% 42% at 50% -4%, rgba(94,231,200,.13) 0%, rgba(0,0,0,0) 62%), linear-gradient(180deg,#080B12 0%, #05070B 48%, #03050A 100%); --grain-opacity:.05; --grain-blend:overlay; /* ---------- типографика ---------- */ --display:"Unbounded","Trebuchet MS",sans-serif; --body:"Manrope","Helvetica Neue",Arial,sans-serif; --mono:"JetBrains Mono","SF Mono",Menlo,monospace; /* ---------- геометрия ---------- */ --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:22px; --r-2xl:28px; --pad:16px; /* боковые поля экрана */ --wrap:520px; /* максимальная ширина контента */ --topbar-h:58px; --tabbar-h:62px; /* ---------- движение ---------- */ --ease:cubic-bezier(.22,.72,.16,1); --fast:.18s; --mid:.3s; --slow:.55s; /* ---------- отступы под чёлку и системные панели телефона ---------- */ --safe-top:env(safe-area-inset-top,0px); --safe-bottom:env(safe-area-inset-bottom,0px); color-scheme:dark; } /* ========================================================== Светлая тема. Переопределяем ТОЛЬКО то, что меняется. Ставится атрибутом data-theme="light" на . ========================================================== */ [data-theme="light"]{ --void:#F4F6FA; --surface:rgba(12,20,32,.035); --surface-2:rgba(12,20,32,.065); --line:rgba(12,20,32,.09); --line-2:rgba(12,20,32,.16); --text:#0F1722; --muted:#5A6678; --dim:#8792A3; --accent:#0FA88A; --accent-soft:#4FD3B6; --accent-deep:#0A7A64; --accent-2:#5B49E0; --accent-2-soft:#8B7BFF; --halo:rgba(15,168,138,.35); --halo-2:rgba(91,73,224,.3); --on-accent:#FFFFFF; --good:#1F9D57; --warn:#B87422; --bad:#C4483A; --info:#3D6EA8; --glass-bg:linear-gradient(177deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.7) 46%,rgba(255,255,255,.82) 100%); --glass-line:rgba(12,20,32,.1); --glass-lip:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(12,20,32,.03); --glass-drop:0 24px 60px -30px rgba(20,32,54,.28), 0 2px 10px -4px rgba(20,32,54,.12); --aura: radial-gradient(120% 58% at 50% -12%, rgba(91,73,224,.16) 0%, rgba(0,0,0,0) 58%), radial-gradient(78% 42% at 50% -4%, rgba(15,168,138,.14) 0%, rgba(0,0,0,0) 62%), linear-gradient(180deg,#FFFFFF 0%, #F4F6FA 48%, #EDF1F7 100%); --grain-opacity:.03; --grain-blend:multiply; color-scheme:light; }