/* ============================================================ DESIGN TOKENS — Komus B2B Услуги Источник: docs/design-system/komuscontact/DESIGN_SYSTEM.md Брендовая палитра Komus: красный #C00000 + нейтральный серый. Шрифт: локальный variable Manrope 300–800. Подключается до styles.css. ============================================================ */ /* Manrope v20, SIL Open Font License 1.1. Файлы и лицензия: public/assets/fonts/manrope/. */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('/assets/fonts/manrope/manrope-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('/assets/fonts/manrope/manrope-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('/assets/fonts/manrope/manrope-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* ---------- Нейтральная шкала ---------- */ --c-white: #ffffff; --c-ink: #1a1a1a; /* основной текст / заголовки */ --c-ink-2: #2a2a2a; --c-text: #3d3d3d; /* body text */ --c-text-muted: #6b6b6b; /* подписи, мета */ --c-text-subtle: #a6a6a6; /* брендовый серый — placeholder, мета 2 уровня */ --c-bg: #ffffff; --c-surface: #f6f6f6; /* секции, light bg */ --c-surface-2: #ededed; /* hover state */ --c-surface-3: #e0e0e0; /* active state, неактивные кнопки */ --c-border: #e6e6e6; /* основная граница */ --c-border-strong:#c9c9c9; /* hover, focused */ --c-divider: #ededed; /* ---------- Бренд: Komus Red ---------- */ --c-primary: #c00000; --c-primary-hover: #a30000; --c-primary-active: #8a0000; --c-primary-soft: #fce6e6; --c-primary-ink: #5c0000; /* CTA-акцент в Komus тот же красный — алиасим */ --c-accent: var(--c-primary); --c-accent-hover: var(--c-primary-hover); --c-accent-active: var(--c-primary-active); --c-accent-soft: var(--c-primary-soft); --c-accent-ink: var(--c-primary-ink); /* Брендовый нейтральный серый из материалов Komus */ --c-brand-gray: #a6a6a6; --c-brand-gray-soft:#ededed; /* ---------- Семантика ---------- */ --c-success: #2e7d32; --c-success-soft: #e6f1e7; --c-success-ink: #1b4d1f; --c-warning: #ed6c02; --c-warning-soft: #fdecda; --c-warning-ink: #8c3d00; --c-danger: #c00000; /* совпадает с primary */ --c-danger-soft: #fce6e6; --c-danger-ink: #5c0000; --c-info: #0277bd; --c-info-soft: #e0f1fb; --c-info-ink: #014870; /* ---------- Типографика ---------- Основной шрифт: локальный variable Manrope. */ --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-display: 'Manrope', 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* размеры */ --t-12: 0.75rem; --t-12-5: 0.78rem; --t-13: 0.8125rem; --t-13-1: 0.82rem; --t-14: 0.875rem; --t-14-4: 0.9rem; --t-14-7: 0.92rem; --t-15: 0.9375rem; --t-16: 1rem; --t-18: 1.125rem; --t-19-5: 1.22rem; --t-20: 1.25rem; --t-20-3: 1.27rem; --t-21-6: 1.35rem; --t-24: 1.5rem; --t-28: 1.75rem; --t-32: 2rem; --t-40: 2.5rem; --t-48: 3rem; --t-56: 3.5rem; --t-72: 4.5rem; --lh-tight: 1.05; --lh-snug: 1.15; --lh-normal: 1.45; --lh-relaxed: 1.6; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --ls-tightest: -0.03em; --ls-tight: -0.02em; --ls-snug: -0.01em; --ls-normal: 0; --ls-wide: 0.04em; --ls-widest: 0.08em; /* ---------- Скругления ---------- */ --r-xs: 2px; --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 24px; --r-pill:9999px; /* ---------- Отступы (4px base) ---------- */ --s-0: 0; --s-0-25: 1px; --s-0-5: 2px; --s-1: 4px; --s-1-5: 6px; --s-2: 8px; --s-2-5: 10px; --s-3: 12px; --s-3-5: 14px; --s-4: 16px; --s-4-5: 18px; --s-5: 20px; --s-5-5: 22px; --s-6: 24px; --s-6-5: 26px; --s-7-5: 28px; --s-7: 32px; --s-8-5: 34px; --s-9-5: 36px; --s-8: 40px; --s-9: 48px; --s-9-25: 56px; --s-10: 64px; --s-11: 80px; --s-12: 96px; --s-13:120px; /* ---------- Тени ---------- */ --sh-xs: 0 1px 2px rgba(26, 26, 26, .04); --sh-sm: 0 1px 3px rgba(26, 26, 26, .06), 0 1px 2px rgba(26, 26, 26, .04); --sh-md: 0 4px 12px rgba(26, 26, 26, .06), 0 2px 4px rgba(26, 26, 26, .04); --sh-lg: 0 12px 32px rgba(26, 26, 26, .08), 0 4px 8px rgba(26, 26, 26, .04); --sh-xl: 0 24px 48px rgba(26, 26, 26, .12); --sh-focus: 0 0 0 3px rgba(192, 0, 0, .22); --sh-focus-accent: var(--sh-focus); /* ---------- Размеры контейнеров и сетки ---------- */ --container-max: 1280px; --container-pad-x: var(--s-6); --container-pad-x-sm: var(--s-4); /* One page-shell gutter for production blocks. Keep the design-system container and site layout on the same horizontal contract. */ --page-gutter: var(--container-pad-x); --page-gutter-sm: var(--container-pad-x-sm); --page-container: min(var(--container-max), calc(100% - (2 * var(--page-gutter)))); --page-container-sm: min(var(--container-max), calc(100% - (2 * var(--page-gutter-sm)))); --grid-gap: var(--s-6); --grid-gap-sm: var(--s-4); /* размеры элементов */ --h-input: 44px; --h-input-sm: 36px; --h-input-lg: 52px; --h-button: 44px; --h-button-sm:36px; --h-button-lg:52px; --h-header: 72px; --h-topbar: 40px; /* ширины блоков */ --w-card-min: 280px; --w-sidebar: 280px; --w-form-narrow: 480px; --w-text-readable: 720px; /* ---------- Motion ---------- */ --ease-out: cubic-bezier(.2, .8, .2, 1); --ease-in-out: cubic-bezier(.4, 0, .2, 1); --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 280ms; /* ---------- Z-index ---------- */ --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-header: 300; --z-overlay: 400; --z-modal: 500; --z-toast: 600; }