/* ============================================================ * 01-variables.css — ЕДИНСТВЕННЫЙ источник всех переменных * ============================================================ * Цвета, отступы, радиусы, тени, шрифты, анимации. * Все остальные CSS-файлы используют ТОЛЬКО var(--name). * Никаких хардкодов и переопределений переменных в других файлах. * * Тёмная тема: data-theme="dark" на . * ============================================================ */ :root { /* ===== ПОВЕРХНОСТИ ===== */ --color-bg: #ececf0; --color-surface: #ffffff; --color-surface-alt: #f9fafb; --color-surface-dim: #f5f5f7; --color-border: #a8b0c0; --color-border-strong: #7888a0; --color-overlay: rgba(0, 0, 0, 0.35); --color-surface-tint: rgba(120, 120, 128, 0.12); --color-surface-translucent: rgba(255, 255, 255, 0.78); /* ===== ТЕКСТ ===== */ --color-text: #1c1c1e; --color-text-muted: #6b7280; --color-text-faint: #9ca3af; --color-text-inverse: #ffffff; /* ===== АКЦЕНТ ===== */ --color-accent: #0a84ff; --color-accent-hover: #0066cc; --color-accent-soft: #e0efff; --color-accent-glow: rgba(10, 132, 255, 0.28); /* ===== СЕМАНТИЧЕСКИЕ ===== */ --color-success: #4ade80; --color-success-soft: #dcfce7; --color-warning: #f5c542; --color-warning-soft: #fef9c3; --color-danger: #ff453a; --color-danger-soft: #fee2e2; --color-info: #ff9f0a; --color-info-soft: #ffedd5; /* ===== CRM СТАТУСЫ ===== */ --color-status-orange: #c56a1e; --color-status-orange-soft: rgba(217, 120, 50, 0.14); --color-status-purple: #7c3aed; --color-status-purple-soft: rgba(167, 139, 250, 0.16); --color-status-purple-light: #c4b5fd; /* ===== ТЕНИ ===== */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.06); --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.14), 0 4px 10px rgba(0, 0, 0, 0.08); --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.18), 0 8px 20px rgba(0, 0, 0, 0.10); /* ===== РАДИУСЫ ===== */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 18px; --radius-xl: 22px; --radius-2xl: 28px; --radius-full: 999px; /* ===== ОТСТУПЫ ===== */ --space-1: 2px; --space-2: 4px; --space-3: 6px; --space-4: 8px; --space-5: 10px; --space-6: 12px; --space-7: 14px; --space-8: 16px; --space-9: 18px; --space-10: 20px; --space-11: 22px; --space-12: 24px; --space-14: 28px; --space-16: 32px; --space-20: 40px; /* ===== ШРИФТЫ ===== */ --font-sans: 'InterVariable', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* ===== РАЗМЕРЫ ШРИФТА ===== */ --text-xs: 11px; --text-sm: 12px; --text-base: 14px; --text-md: 15px; --text-lg: 17px; --text-xl: 18px; --text-2xl: 22px; --text-3xl: 28px; /* ===== ТОЛЩИНА ===== */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ===== ВЫСОТА СТРОК ===== */ --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.5; --leading-loose: 1.7; /* ===== АНИМАЦИИ ===== */ --ease: cubic-bezier(0.32, 0.72, 0, 1); --spring: cubic-bezier(0.34, 1.56, 0.64, 1); --transition-fast: 120ms var(--ease); --transition-normal: 200ms var(--ease); --transition-slow: 320ms var(--ease); /* ===== Z-ИНДЕКСЫ ===== */ --z-base: 1; --z-sticky: 100; --z-overlay: 1000; --z-modal: 2000; --z-toast: 2100; --z-tooltip: 2200; /* ===== BLUR ===== */ --blur-bar: saturate(180%) blur(22px); /* ============================================================ * АЛИАСЫ — короткие имена для совместимости * ============================================================ * Используются в manager/*.css и master/*.css. * Определены ЗДЕСЬ и НИГДЕ БОЛЬШЕ. Тёмная тема переопределяет * --color-* значения, алиасы подтягивают их автоматически. * ============================================================ */ /* Поверхности */ --bg: var(--color-bg); --surface: var(--color-surface); --surface-2: var(--color-surface-dim); --surface-alt: var(--color-surface-alt); --surface-tint: var(--color-surface-tint); --surface-translucent: var(--color-surface-translucent); --sf: var(--color-surface); --sf-solid: var(--color-surface); --s2: var(--color-surface-alt); --s3: var(--color-surface-tint); /* Границы */ --bd: var(--color-border); --separator: var(--color-border); --hairline: var(--color-border); /* Текст */ --tx: var(--color-text); --t2: var(--color-text-muted); --t3: var(--color-text-faint); --t1: var(--color-text); /* Акцент */ --ac: var(--color-accent); --ac-bg: var(--color-accent-soft); --ac-bg-2: rgba(10, 132, 255, 0.20); --ac-glow: var(--color-accent-glow); --ac-soft: var(--color-accent-soft); /* Семантические */ --rd: var(--color-danger); --rd-bg: var(--color-danger-soft); --gr: var(--color-success); --gr-bg: var(--color-success-soft); --yl: var(--color-warning); --yl-bg: var(--color-warning-soft); /* Радиусы (короткие) */ --r-xs: var(--radius-xs); --r-sm: var(--radius-sm); --r-md: var(--radius-md); --r-lg: var(--radius-lg); --r-xl: var(--radius-xl); --r-2xl: var(--radius-2xl); --r-full: var(--radius-full); --r: var(--radius-md); /* Шрифт */ --font-base: var(--font-sans); --mn: var(--font-mono); /* Прочее */ --pink: #ff375f; --blur-bar: var(--blur-bar); } /* ============================================================ * ТЁМНАЯ ТЕМА * ============================================================ */ [data-theme="dark"] { --color-bg: #0a0a0c; --color-surface: #1c1c1e; --color-surface-alt: #2c2c2e; --color-surface-dim: #1a1a1c; --color-border: #2c2c2e; --color-border-strong: #3a3a3c; --color-overlay: rgba(0, 0, 0, 0.55); --color-surface-tint: rgba(118, 118, 128, 0.20); --color-surface-translucent: rgba(28, 28, 30, 0.72); --color-text: #f5f5f7; --color-text-muted: #a1a1aa; --color-text-faint: #71717a; --color-text-inverse: #1c1c1e; --color-accent: #0a84ff; --color-accent-hover: #4ca0ff; --color-accent-soft: rgba(10, 132, 255, 0.15); --color-accent-glow: rgba(10, 132, 255, 0.35); --color-success: #30d158; --color-success-soft: rgba(48, 209, 88, 0.15); --color-warning: #ffd60a; --color-warning-soft: rgba(255, 214, 10, 0.15); --color-danger: #ff453a; --color-danger-soft: rgba(255, 69, 58, 0.15); --color-info: #ff9f0a; --color-info-soft: rgba(255, 159, 10, 0.15); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.25); --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.3); --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.6), 0 8px 20px rgba(0, 0, 0, 0.35); --blur-bar: saturate(180%) blur(26px); --s3: rgba(118, 118, 128, 0.24); --hairline: rgba(255, 255, 255, 0.06); --ac-bg-2: rgba(10, 132, 255, 0.30); } @media (prefers-color-scheme: dark) { html:not([data-theme]) { --color-bg: #0a0a0c; --color-surface: #1c1c1e; --color-surface-alt: #2c2c2e; --color-surface-dim: #1a1a1c; --color-border: #2c2c2e; --color-border-strong: #3a3a3c; --color-overlay: rgba(0, 0, 0, 0.55); --color-surface-tint: rgba(118, 118, 128, 0.20); --color-surface-translucent: rgba(28, 28, 30, 0.72); --color-text: #f5f5f7; --color-text-muted: #a1a1aa; --color-text-faint: #71717a; --color-text-inverse: #1c1c1e; --color-accent: #0a84ff; --color-accent-hover: #4ca0ff; --color-accent-soft: rgba(10, 132, 255, 0.15); --color-accent-glow: rgba(10, 132, 255, 0.35); --color-success: #30d158; --color-success-soft: rgba(48, 209, 88, 0.15); --color-warning: #ffd60a; --color-warning-soft: rgba(255, 214, 10, 0.15); --color-danger: #ff453a; --color-danger-soft: rgba(255, 69, 58, 0.15); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.25); --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.3); --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.6), 0 8px 20px rgba(0, 0, 0, 0.35); --blur-bar: saturate(180%) blur(26px); --s3: rgba(118, 118, 128, 0.24); --hairline: rgba(255, 255, 255, 0.06); --ac-bg-2: rgba(10, 132, 255, 0.30); } }