/** * Design Tokens - Единая система дизайна * Современные CSS переменные для light/dark тем * * Tariff Colors: * 🟩 В режиме чата - Green * 🟥 Видео-встреча - Red/Coral * 🟦 Повторная запись - Blue * ⭐️ Всё включено - Gold */ /* ===== Light Theme (Default) ===== */ :root { /* === Tariff Accent Colors === */ --plan-chat: #22C55E; --plan-chat-soft: rgba(34, 197, 94, 0.12); --plan-chat-glow: rgba(34, 197, 94, 0.25); --plan-video: #EF4444; --plan-video-soft: rgba(239, 68, 68, 0.12); --plan-video-glow: rgba(239, 68, 68, 0.25); --plan-all: #F59E0B; --plan-all-soft: rgba(245, 158, 11, 0.12); --plan-all-glow: rgba(245, 158, 11, 0.25); --plan-repeat: #3B82F6; --plan-repeat-soft: rgba(59, 130, 246, 0.12); --plan-repeat-glow: rgba(59, 130, 246, 0.25); /* === Page Background === */ --bg-page: #F4F6F9; --bg-gradient: linear-gradient( 165deg, rgba(255, 255, 255, 0.9) 0%, rgba(244, 246, 249, 1) 50%, rgba(235, 238, 245, 1) 100% ); /* === Glass Effect === */ --glass-bg: rgba(255, 255, 255, 0.72); --glass-border: rgba(255, 255, 255, 0.85); --glass-blur: 12px; --glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --glass-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06); /* === Card === */ --card-bg: rgba(255, 255, 255, 0.88); --card-border: rgba(255, 255, 255, 0.9); --card-radius: 24px; --card-padding: 20px; /* === Text Colors === */ --text-primary: rgba(18, 18, 22, 0.92); --text-secondary: rgba(18, 18, 22, 0.58); --text-muted: rgba(18, 18, 22, 0.38); --text-inverse: #FFFFFF; /* === UI Elements === */ --border-subtle: rgba(0, 0, 0, 0.06); --border-accent: rgba(0, 0, 0, 0.1); --divider: rgba(0, 0, 0, 0.08); /* === Interactive States === */ --hover-overlay: rgba(0, 0, 0, 0.03); --pressed-overlay: rgba(0, 0, 0, 0.06); --focus-ring: rgba(66, 133, 244, 0.4); /* === Button === */ --btn-radius: 14px; --btn-height: 48px; --btn-font-size: 15px; /* === Typography === */ --font-display: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --text-xs: 12px; --text-sm: 13px; --text-base: 15px; --text-lg: 17px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 30px; --leading-tight: 1.2; --leading-normal: 1.5; --leading-relaxed: 1.65; /* === Spacing === */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; /* === Animation === */ --duration-fast: 150ms; --duration-normal: 200ms; --duration-slow: 300ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* === Z-Index === */ --z-card: 1; --z-sticky: 100; --z-modal: 1000; --z-loading: 9999; /* === Accent Line === */ --accent-line-width: 4px; /* === Icon Watermark === */ --watermark-size: 56px; --watermark-opacity: 0.08; } /* ===== Dark Theme ===== */ @media (prefers-color-scheme: dark) { :root { /* === Tariff Accent Colors (brighter for dark) === */ --plan-chat: #5EF08C; --plan-chat-soft: rgba(94, 240, 140, 0.2); --plan-chat-glow: rgba(94, 240, 140, 0.35); --plan-video: #FF7B7B; --plan-video-soft: rgba(255, 123, 123, 0.2); --plan-video-glow: rgba(255, 123, 123, 0.35); --plan-all: #FFD059; --plan-all-soft: rgba(255, 208, 89, 0.2); --plan-all-glow: rgba(255, 208, 89, 0.35); --plan-repeat: #60A5FA; --plan-repeat-soft: rgba(96, 165, 250, 0.2); --plan-repeat-glow: rgba(96, 165, 250, 0.35); /* === Page Background === */ --bg-page: #0F0F12; --bg-gradient: linear-gradient( 165deg, rgba(25, 25, 30, 1) 0%, rgba(15, 15, 18, 1) 50%, rgba(10, 10, 14, 1) 100% ); /* === Glass Effect (dark) === */ --glass-bg: rgba(30, 30, 36, 0.75); --glass-border: rgba(255, 255, 255, 0.08); --glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3); --glass-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.4); /* === Card (dark) === */ --card-bg: rgba(35, 35, 42, 0.85); --card-border: rgba(255, 255, 255, 0.06); /* === Text Colors (dark) === */ --text-primary: rgba(255, 255, 255, 0.95); --text-secondary: rgba(255, 255, 255, 0.68); --text-muted: rgba(255, 255, 255, 0.45); --text-inverse: #0F0F12; /* === UI Elements (dark) === */ --border-subtle: rgba(255, 255, 255, 0.06); --border-accent: rgba(255, 255, 255, 0.1); --divider: rgba(255, 255, 255, 0.08); /* === Interactive States (dark) === */ --hover-overlay: rgba(255, 255, 255, 0.06); --pressed-overlay: rgba(255, 255, 255, 0.1); /* === Icon Watermark (dark) === */ --watermark-opacity: 0.08; } } /* ===== Telegram Theme Overrides ===== */ /* Telegram passes theme via CSS variables */ body.tg-theme-dark { /* === Tariff Accent Colors (brighter for dark theme) === */ --plan-chat: #5EF08C; --plan-chat-soft: rgba(94, 240, 140, 0.2); --plan-chat-glow: rgba(94, 240, 140, 0.35); --plan-video: #FF7B7B; --plan-video-soft: rgba(255, 123, 123, 0.2); --plan-video-glow: rgba(255, 123, 123, 0.35); --plan-all: #FFD059; --plan-all-soft: rgba(255, 208, 89, 0.2); --plan-all-glow: rgba(255, 208, 89, 0.35); --plan-repeat: #60A5FA; --plan-repeat-soft: rgba(96, 165, 250, 0.2); --plan-repeat-glow: rgba(96, 165, 250, 0.35); --bg-page: #0F0F12; --bg-gradient: linear-gradient( 165deg, rgba(25, 25, 30, 1) 0%, rgba(15, 15, 18, 1) 50%, rgba(10, 10, 14, 1) 100% ); --glass-bg: rgba(30, 30, 36, 0.75); --glass-border: rgba(255, 255, 255, 0.08); --glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3); --glass-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.4); --card-bg: rgba(35, 35, 42, 0.85); --card-border: rgba(255, 255, 255, 0.06); --text-primary: rgba(255, 255, 255, 0.95); --text-secondary: rgba(255, 255, 255, 0.68); --text-muted: rgba(255, 255, 255, 0.45); --text-inverse: #0F0F12; --border-subtle: rgba(255, 255, 255, 0.06); --border-accent: rgba(255, 255, 255, 0.1); --divider: rgba(255, 255, 255, 0.08); --hover-overlay: rgba(255, 255, 255, 0.06); --pressed-overlay: rgba(255, 255, 255, 0.1); --watermark-opacity: 0.08; } /* ===== Fallback for no backdrop-filter support ===== */ @supports not (backdrop-filter: blur(1px)) { :root { --glass-bg: rgba(255, 255, 255, 0.95); --card-bg: rgba(255, 255, 255, 0.98); } @media (prefers-color-scheme: dark) { :root { --glass-bg: rgba(30, 30, 36, 0.98); --card-bg: rgba(35, 35, 42, 0.98); } } }