/* ============================================ PARADIGMA Design System — CSS Variables v2.0 ============================================ Использование: - Admin Panel: - Business Panel: ============================================ */ /* ---------- ОБЩИЕ ТОКЕНЫ ---------- */ :root { /* Font */ --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Font Sizes */ --font-display: 2rem; /* 32px */ --font-h1: 1.5rem; /* 24px */ --font-h2: 1.125rem; /* 18px */ --font-h3: 1rem; /* 16px */ --font-body: 0.875rem; /* 14px */ --font-label: 0.8rem; /* 12.8px */ --font-caption: 0.75rem; /* 12px */ --font-badge: 0.7rem; /* 11.2px */ --font-overline: 0.65rem; /* 10.4px */ /* KPI Numbers */ --font-kpi-large: 2rem; /* 32px */ --font-kpi: 1.75rem; /* 28px */ --font-kpi-small: 1.25rem; /* 20px */ /* Font Weights */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Line Heights */ --lh-tight: 1.2; --lh-snug: 1.3; --lh-normal: 1.4; --lh-relaxed: 1.6; /* Letter Spacing */ --ls-tight: -0.02em; --ls-snug: -0.01em; --ls-normal: 0; --ls-wide: 0.01em; --ls-wider: 0.02em; --ls-widest: 0.1em; /* Spacing (8px grid) */ --space-0: 0; --space-1: 4px; /* 0.5 unit */ --space-2: 8px; /* 1 unit */ --space-3: 12px; /* 1.5 unit */ --space-4: 16px; /* 2 unit */ --space-5: 20px; /* 2.5 unit */ --space-6: 24px; /* 3 unit */ --space-7: 32px; /* 4 unit */ --space-8: 40px; /* 5 unit */ --space-9: 48px; /* 6 unit */ --space-10: 64px; /* 8 unit */ /* Border Radius */ --radius-none: 0; --radius-sm: 6px; --radius-md: 8px; --radius-default: 10px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-3xl: 24px; --radius-full: 9999px; /* Accent Colors (shared) */ --accent-blue: #3b82f6; --accent-blue-dark: #2563eb; --accent-blue-glow: rgba(59, 130, 246, 0.15); --accent-blue-hover: #2563eb; /* Semantic Colors */ --success: #10b981; --success-bg: rgba(16, 185, 129, 0.1); --warning: #f59e0b; --warning-bg: rgba(245, 158, 11, 0.1); --danger: #ef4444; --danger-bg: rgba(239, 68, 68, 0.1); --info: #06b6d4; --info-bg: rgba(6, 182, 212, 0.1); /* Chrome Brand */ --chrome-dark: #a0a0a0; --chrome-light: #e8e8e8; --chrome-white: #ffffff; --chrome-silver: #c0c0c0; --chrome-gradient: linear-gradient(135deg, #a0a0a0, #e8e8e8, #c0c0c0, #ffffff, #c0c0c0); /* Fire Brand */ --fire-orange: #f97316; --fire-red: #ef4444; /* Platform Colors */ --color-vk: #0077ff; --color-telegram: #26a5e4; --color-whatsapp: #25d366; --color-instagram: #e4405f; --color-max: #ff6600; --color-2gis: #2db543; --color-yandex: #fc3f1d; --color-google: #4285f4; /* Animation */ --ease-default: cubic-bezier(0.4, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-instant: 100ms; --duration-fast: 150ms; --duration-normal: 200ms; --duration-slow: 300ms; /* Z-index */ --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-modal: 300; --z-toast: 400; --z-tooltip: 500; /* Layout */ --sidebar-expanded: 280px; --sidebar-collapsed: 72px; --topbar-height: 64px; --max-content-width: 1280px; --grid-columns: 12; --gutter-desktop: 24px; --gutter-mobile: 16px; /* Icons */ --icon-sidebar: 18px; --icon-stat: 20px; --icon-button: 16px; --icon-topbar: 20px; --icon-logo: 32px; --icon-empty: 24px; /* empty state decorative icons */ /* Component Tokens */ --card-padding: var(--space-5); /* 20px — standard for all cards */ --card-gap: var(--space-4); /* 16px — gap between cards */ --section-padding: var(--space-6); /* 24px — padding for sections */ --icon-container-sm: 40px; /* container for stat/activity icons */ --icon-container-lg: 48px; /* container for larger icons */ /* === INTERACTIVE TOKENS v2.1 — "Juicy" Upgrade === */ /* Fire brand glow variants */ --fire-orange-light: #fb923c; --fire-orange-dark: #ea580c; --fire-orange-glow: rgba(249, 115, 22, 0.35); --fire-orange-glow-subtle: rgba(249, 115, 22, 0.15); /* Button gradients */ --btn-fire-gradient: linear-gradient(135deg, #ea580c, #f97316, #fb923c); --btn-blue-gradient: linear-gradient(135deg, #1d4ed8, #2563eb, #3b82f6); --btn-blue-gradient-hover: linear-gradient(135deg, #2563eb, #3b82f6, #60a5fa); --btn-blue-glow: rgba(59, 130, 246, 0.4); --btn-fire-glow: rgba(249, 115, 22, 0.4); /* Interactive easing */ --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-micro: 120ms; /* Toggle glow */ --toggle-glow-on: 0 0 12px rgba(16, 185, 129, 0.4); } /* ---------- ADMIN DARK THEME ---------- */ [data-theme="admin"], .theme-admin { --bg-deep: #0a0e14; --bg-surface: #111827; --bg-elevated: #1a2233; --bg-overlay: rgba(0, 0, 0, 0.6); --border-default: rgba(255, 255, 255, 0.06); --border-hover: rgba(255, 255, 255, 0.12); --border-focus: rgba(59, 130, 246, 0.5); --text-primary: #e6edf3; --text-secondary: #8b949e; --text-muted: #484f58; --text-inverse: #0a0e14; --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4); --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.5); --shadow-glow: 0 0 20px rgba(59, 130, 246, 0.1); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.1); --btn-primary-bg: linear-gradient(135deg, #1d4ed8, #2563eb, #3b82f6); --btn-primary-border: 1px solid rgba(255, 255, 255, 0.08); --btn-primary-shadow: 0 2px 8px rgba(37, 99, 235, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); /* Semantic text colors (light-on-dark) */ --success-text: #34d399; --danger-text: #f87171; --warning-text: #fbbf24; --info-text: #22d3ee; /* Subtle background */ --bg-subtle: rgba(255, 255, 255, 0.03); /* Interactive upgrade tokens — Admin Dark */ --btn-cta-bg: var(--btn-fire-gradient); --btn-cta-glow: 0 4px 20px var(--fire-orange-glow), 0 0 40px var(--fire-orange-glow-subtle); --btn-cta-glow-hover: 0 6px 30px var(--fire-orange-glow), 0 0 60px rgba(249, 115, 22, 0.2); --btn-primary-glow-hover: 0 4px 20px var(--btn-blue-glow), inset 0 1px 0 rgba(255, 255, 255, 0.15); --row-hover-bg: rgba(59, 130, 246, 0.06); --tab-active-glow: 0 2px 8px rgba(59, 130, 246, 0.3); --card-hover-glow: 0 0 20px rgba(59, 130, 246, 0.08); color-scheme: dark; } /* ---------- BUSINESS LIGHT THEME ---------- */ [data-theme="business"], .theme-business { --bg-deep: #f5f5f7; --bg-surface: #ffffff; --bg-elevated: #f0f0f2; --bg-overlay: rgba(0, 0, 0, 0.3); --border-default: rgba(0, 0, 0, 0.06); --border-hover: rgba(0, 0, 0, 0.12); --border-focus: rgba(37, 99, 235, 0.5); --text-primary: #1d1d1f; --text-secondary: #86868b; --text-muted: #aeaeb2; --text-inverse: #ffffff; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.03); --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04); --shadow-lg: 0 2px 8px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.06); --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.08); --shadow-glow: none; --shadow-inset: none; --btn-primary-bg: #2563eb; --btn-primary-border: none; --btn-primary-shadow: none; /* Semantic text colors (dark-on-light) */ --success-text: #059669; --danger-text: #dc2626; --warning-text: #d97706; --info-text: #0891b2; /* Subtle background */ --bg-subtle: #f9fafb; /* Interactive upgrade tokens — Business Light */ --btn-cta-bg: var(--btn-fire-gradient); --btn-cta-glow: 0 2px 12px rgba(249, 115, 22, 0.2); --btn-cta-glow-hover: 0 4px 20px rgba(249, 115, 22, 0.25); --btn-primary-glow-hover: 0 2px 12px rgba(37, 99, 235, 0.2); --row-hover-bg: rgba(59, 130, 246, 0.04); --tab-active-glow: 0 1px 6px rgba(59, 130, 246, 0.15); --card-hover-glow: 0 0 16px rgba(0, 0, 0, 0.04); color-scheme: light; } /* ---------- BREAKPOINTS (media queries) ---------- */ /* Usage example: @media (max-width: 1024px) — tablet @media (max-width: 768px) — phone @media (max-width: 480px) — small phone */ /* ---------- REDUCED MOTION ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ---------- BASE RESET (optional) ---------- */ /* body { font-family: var(--font-family); font-size: var(--font-body); font-weight: var(--weight-regular); line-height: var(--lh-relaxed); color: var(--text-primary); background-color: var(--bg-deep); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } */