/** * theme.css - design tokens (CSS-переменные) под тёмную и светлую тему. * * Тёмная тема - значения по умолчанию на :root. Светлая тема включается * атрибутом data-theme="light" на (см. js/theme.js) - оверрайд тех же * имён переменных, поэтому остальной CSS (style.css, components.js) вообще * не знает о теме, он просто использует var(--bg), var(--accent) и т.д. * * Палитра и общий стиль ориентированы на референс "EngineVPN" (тёмный фон, * карточки чуть светлее фона с мягкой границей, акцентный синий). */ :root { /* фон */ --bg: #0b0e14; --bg-elevated: #10141d; /* карточки */ --card-bg: #141922; --card-border: #232a38; --card-radius: 14px; --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.35); /* текст */ --text-primary: #f2f4f8; --text-secondary: #8b93a7; --text-muted: #5c6478; /* акцент */ --accent: #2f6fed; --accent-hover: #4f85f2; --accent-text: #ffffff; /* статусы */ --success: #22c55e; --success-bg: rgba(34, 197, 94, 0.14); --warning: #f59e0b; --warning-bg: rgba(245, 158, 11, 0.14); --danger: #ef4444; --danger-bg: rgba(239, 68, 68, 0.14); --info: #6366f1; --info-bg: rgba(99, 102, 241, 0.14); /* элементы управления */ --input-bg: #0f1420; --input-border: #262e3d; --control-radius: 10px; /* навигация */ --nav-bg: #0d1117; --nav-border: #1c212c; --nav-item-active-bg: rgba(47, 111, 237, 0.15); --breakpoint-tablet: 768px; } :root[data-theme="light"] { --bg: #f4f6f9; --bg-elevated: #ffffff; --card-bg: #ffffff; --card-border: #e3e7ee; --card-shadow: 0 2px 10px rgba(15, 23, 42, 0.06); --text-primary: #10141d; --text-secondary: #565f75; --text-muted: #8992a6; --accent: #2f6fed; --accent-hover: #1d54c9; --accent-text: #ffffff; --success: #16a34a; --success-bg: rgba(22, 163, 74, 0.10); --warning: #d97706; --warning-bg: rgba(217, 119, 6, 0.10); --danger: #dc2626; --danger-bg: rgba(220, 38, 38, 0.10); --info: #4f46e5; --info-bg: rgba(79, 70, 229, 0.10); --input-bg: #ffffff; --input-border: #d7dce6; --nav-bg: #ffffff; --nav-border: #e3e7ee; --nav-item-active-bg: rgba(47, 111, 237, 0.10); }