/* TOKEN PORTAL — design tokens Единственный источник правды по цветам, типографике, отступам. Префикс переменных: --mk-* Подключать ПЕРВЫМ, до components.css. */ @import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap"); :root { /* --- Шрифты --- */ --mk-font-sans: "Manrope", "Segoe UI", "Helvetica Neue", Arial, sans-serif; --mk-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace; /* --- Размеры текста --- */ --mk-fs-3xs: 10px; --mk-fs-2xs: 11px; --mk-fs-xs: 12px; --mk-fs-sm: 13px; --mk-fs-md: 15px; --mk-fs-lg: 17px; --mk-fs-xl: 20px; --mk-fs-2xl: 26px; --mk-fs-3xl: 34px; --mk-fs-4xl: 44px; --mk-fs-5xl: 60px; --mk-lh-tight: 1.1; --mk-lh-snug: 1.3; --mk-lh-base: 1.55; --mk-fw-regular: 400; --mk-fw-medium: 500; --mk-fw-semibold: 600; --mk-fw-bold: 700; --mk-fw-black: 800; --mk-tracking-caps: 0.14em; --mk-tracking-wide: 0.04em; --mk-tracking-tight: -0.02em; /* --- Отступы (шаг 4px) --- */ --mk-space-1: 4px; --mk-space-2: 8px; --mk-space-3: 12px; --mk-space-4: 16px; --mk-space-5: 20px; --mk-space-6: 24px; --mk-space-8: 32px; --mk-space-10: 40px; --mk-space-12: 48px; --mk-space-16: 64px; --mk-space-20: 80px; --mk-space-24: 96px; /* --- Радиусы --- */ --mk-radius-xs: 4px; --mk-radius-sm: 6px; --mk-radius-md: 10px; --mk-radius-lg: 14px; --mk-radius-xl: 20px; --mk-radius-pill: 999px; /* --- Тени --- */ --mk-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.34); --mk-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.36); --mk-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.48); --mk-shadow-accent: 0 8px 28px rgba(88, 240, 173, 0.22); --mk-ring-accent: 0 0 0 3px rgba(88, 240, 173, 0.24); --mk-ring-danger: 0 0 0 3px rgba(255, 106, 90, 0.22); /* --- Переходы --- */ --mk-ease: cubic-bezier(0.2, 0.7, 0.3, 1); --mk-dur-fast: 120ms; --mk-dur-base: 200ms; /* --- Слои --- */ --mk-z-header: 100; --mk-z-modal: 400; --mk-z-toast: 500; /* --- Сетка --- */ --mk-container: 1200px; --mk-container-narrow: 820px; /* ============================================================ ЦВЕТА — тёмная тема (основная) Палитра «тёплый графит» + зелёный акцент. ============================================================ */ /* Фоны и поверхности */ --mk-bg: #1a1917; --mk-bg-deep: #141312; --mk-surface: #1e1d1a; --mk-surface-2: #232220; --mk-surface-3: #2a2825; --mk-surface-inset: #171614; /* Границы */ --mk-border: #2c2a27; --mk-border-strong: #33312c; --mk-border-accent: rgba(88, 240, 173, 0.4); /* Текст */ --mk-text: #f5f3ef; --mk-text-secondary: #d2ccc2; --mk-text-muted: #a79f94; --mk-text-faint: #847c71; --mk-text-on-accent: #0d1f17; /* Основной / акцент */ --mk-primary: #58f0ad; --mk-primary-hover: #6ff7bb; --mk-primary-active: #20d98a; --mk-primary-dim: rgba(88, 240, 173, 0.14); --mk-primary-dim-2: rgba(88, 240, 173, 0.28); --mk-accent: #20d98a; /* Статусные цвета */ --mk-success: #58f0ad; --mk-success-bg: rgba(88, 240, 173, 0.13); --mk-success-border: rgba(88, 240, 173, 0.34); --mk-warning: #f5c14b; --mk-warning-bg: rgba(245, 193, 75, 0.13); --mk-warning-border: rgba(245, 193, 75, 0.34); --mk-danger: #ff6a5a; --mk-danger-bg: rgba(255, 106, 90, 0.13); --mk-danger-border: rgba(255, 106, 90, 0.34); --mk-info: #6fb9ff; --mk-info-bg: rgba(111, 185, 255, 0.13); --mk-info-border: rgba(111, 185, 255, 0.34); --mk-neutral: #a79f94; --mk-neutral-bg: rgba(167, 159, 148, 0.12); --mk-neutral-border: rgba(167, 159, 148, 0.3); /* Диаграммы / вспомогательные */ --mk-chart-1: #58f0ad; --mk-chart-2: #6fb9ff; --mk-chart-3: #f5c14b; --mk-chart-4: #c58cff; --mk-chart-5: #ff6a5a; } /* ============================================================ Светлая тема. Включается атрибутом на : ============================================================ */ [data-mk-theme="light"] { --mk-bg: #f6f4f0; --mk-bg-deep: #eeebe5; --mk-surface: #ffffff; --mk-surface-2: #faf8f5; --mk-surface-3: #f1eee8; --mk-surface-inset: #f1eee8; --mk-border: #e1dcd3; --mk-border-strong: #cec8bd; --mk-border-accent: rgba(0, 158, 96, 0.42); --mk-text: #1a1917; --mk-text-secondary: #3c3a35; --mk-text-muted: #6b655c; --mk-text-faint: #8d8579; --mk-text-on-accent: #ffffff; --mk-primary: #059669; --mk-primary-hover: #047d58; --mk-primary-active: #036848; --mk-primary-dim: rgba(5, 150, 105, 0.1); --mk-primary-dim-2: rgba(5, 150, 105, 0.2); --mk-accent: #059669; --mk-success: #067a4f; --mk-success-bg: rgba(6, 122, 79, 0.1); --mk-success-border: rgba(6, 122, 79, 0.28); --mk-warning: #a56b06; --mk-warning-bg: rgba(165, 107, 6, 0.1); --mk-warning-border: rgba(165, 107, 6, 0.26); --mk-danger: #c0392b; --mk-danger-bg: rgba(192, 57, 43, 0.09); --mk-danger-border: rgba(192, 57, 43, 0.26); --mk-info: #1d6fbd; --mk-info-bg: rgba(29, 111, 189, 0.09); --mk-info-border: rgba(29, 111, 189, 0.26); --mk-neutral: #6b655c; --mk-neutral-bg: rgba(107, 101, 92, 0.1); --mk-neutral-border: rgba(107, 101, 92, 0.24); --mk-shadow-sm: 0 1px 2px rgba(26, 25, 23, 0.08); --mk-shadow-md: 0 8px 24px rgba(26, 25, 23, 0.1); --mk-shadow-lg: 0 24px 64px rgba(26, 25, 23, 0.16); --mk-shadow-accent: 0 8px 28px rgba(5, 150, 105, 0.2); --mk-ring-accent: 0 0 0 3px rgba(5, 150, 105, 0.18); } /* ============================================================ Базовые сбросы ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--mk-bg); color: var(--mk-text); font-family: var(--mk-font-sans); font-size: var(--mk-fs-md); line-height: var(--mk-lh-base); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5 { margin: 0; font-weight: var(--mk-fw-bold); line-height: var(--mk-lh-tight); letter-spacing: var(--mk-tracking-tight); } p { margin: 0; } a { color: var(--mk-primary); text-decoration: none; transition: color var(--mk-dur-fast) var(--mk-ease); } a:hover { color: var(--mk-primary-hover); } img, svg { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--mk-primary); outline-offset: 2px; } /* ============================================================ Утилиты-минимум: контейнер и сетка. Всё прочее — в components.css ============================================================ */ .mk-container { width: 100%; max-width: var(--mk-container); margin-inline: auto; padding-inline: var(--mk-space-4); } .mk-container--narrow { max-width: var(--mk-container-narrow); } .mk-stack > * + * { margin-top: var(--mk-space-4); } .mk-mono { font-family: var(--mk-font-mono); letter-spacing: var(--mk-tracking-wide); } .mk-eyebrow { font-family: var(--mk-font-mono); font-size: var(--mk-fs-2xs); font-weight: var(--mk-fw-medium); letter-spacing: var(--mk-tracking-caps); text-transform: uppercase; color: var(--mk-text-faint); } .mk-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } @media (min-width: 768px) { .mk-container { padding-inline: var(--mk-space-8); } }