/* ========================================================================== Дизайн-токены «МинскМир». Единственный источник правды по цвету, типографике, ритму и пластике. Портал подключает ЭТОТ файл — не переопределяйте значения в компонентах. Чтобы получить другой скин (например, голубой для балконов и синий для портала), переопределяется только блок --mm-brand* ниже. ========================================================================== */ :root { /* --- Бренд --------------------------------------------------------- */ --mm-brand: #2563EB; --mm-brand-strong: #1D4ED8; --mm-brand-deep: #172554; --mm-brand-soft: #DBEAFE; --mm-brand-tint: #EFF6FF; --mm-accent: #06B6D4; --mm-accent-soft: #CFFAFE; /* --- Семантика ----------------------------------------------------- */ --mm-success: #10B981; --mm-success-soft: #D1FAE5; --mm-warning: #F59E0B; --mm-danger: #EF4444; /* --- Нейтральные --------------------------------------------------- */ --mm-ink: #0F172A; --mm-ink-soft: #334155; --mm-ink-muted: #64748B; --mm-line: #E2E8F0; --mm-line-soft: #F1F5F9; --mm-bg: #F8FAFC; --mm-surface: #FFFFFF; /* --- Градиенты ------------------------------------------------------ */ --mm-gradient-brand: linear-gradient(135deg, var(--mm-brand-strong) 0%, var(--mm-accent) 100%); --mm-gradient-line: linear-gradient(90deg, var(--mm-brand) 0%, var(--mm-accent) 100%); /* --- Типографика ---------------------------------------------------- */ --mm-font: Manrope, 'Segoe UI', system-ui, -apple-system, sans-serif; --mm-fs-xs: 0.8125rem; /* 13 */ --mm-fs-sm: 0.9375rem; /* 15 */ --mm-fs-base: 1rem; /* 16 */ --mm-fs-lg: 1.125rem; /* 18 */ --mm-fs-xl: 1.375rem; /* 22 */ --mm-fs-h3: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); --mm-fs-h2: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); --mm-fs-h1: clamp(2rem, 1.2rem + 3vw, 3.25rem); --mm-fs-display: clamp(2.75rem, 1.5rem + 5vw, 4.5rem); --mm-lh-tight: 1.12; --mm-lh-snug: 1.3; --mm-lh-base: 1.6; /* --- Ритм ----------------------------------------------------------- */ --mm-space-1: 8px; --mm-space-2: 16px; --mm-space-3: 24px; --mm-space-4: 40px; --mm-space-5: 64px; --mm-space-6: 96px; --mm-container: 1280px; --mm-gutter: 24px; --mm-section-y: clamp(40px, 2rem + 2vw, 68px); /* --- Пластика -------------------------------------------------------- */ --mm-radius-sm: 10px; --mm-radius: 12px; --mm-radius-lg: 16px; --mm-radius-xl: 20px; --mm-radius-2xl: 28px; --mm-radius-pill: 999px; --mm-shadow-sm: 0 2px 8px rgba(15, 23, 42, .05); --mm-shadow: 0 8px 24px rgba(15, 23, 42, .06); --mm-shadow-lg: 0 18px 48px rgba(15, 23, 42, .10); --mm-shadow-brand: 0 8px 20px rgba(37, 99, 235, .26); --mm-ring: 0 0 0 3px rgba(37, 99, 235, .28); /* --- Движение --------------------------------------------------------- */ --mm-ease: cubic-bezier(.22, .61, .36, 1); --mm-dur: .22s; } /* Скин: если порталу нужен другой оттенок бренда — переопределяется здесь, компоненты не трогаются. Пример подключения: */ [data-mm-skin="sky"] { --mm-brand: #0EA5E9; --mm-brand-strong: #0284C7; --mm-brand-deep: #0C4A6E; --mm-brand-soft: #E0F2FE; --mm-brand-tint: #F0F9FF; --mm-accent: #38BDF8; --mm-accent-soft: #E0F2FE; } @media (prefers-reduced-motion: reduce) { :root { --mm-dur: .01ms; } }