/* ========================================================================== NF GROUP — Партнёрский кабинет tokens.css — единственный источник истины по цвету, типографике, пространству, геометрии и движению. Фирменные значения (#931F2B — основной, #7F0B17 — hover, #12110F — чёрный, Inter — гарнитура) взяты из открытого фирменного стиля NF Group и адаптированы под продуктовый интерфейс: тёплая светлая основа, красный — дозированный акцент, а не заливка. Интерфейс сознательно однорежимный (светлый). Тёмная тема не является частью визуальной концепции «светлый · воздушный · дорогой». ========================================================================== */ :root { /* --- Бренд -------------------------------------------------------------- */ --color-brand: #931F2B; /* фирменный красный NF Group */ --color-brand-hover: #7F0B17; /* фирменное hover-состояние */ --color-brand-dark: #5E1119; /* тёмное вино — крупные тёмные плашки */ --color-brand-deep: #3A0C11; /* почти чёрное вино — оверлеи */ --color-brand-soft: #F7EEEF; /* пудрово-красный фон */ --color-brand-softer: #FBF6F6; --color-brand-tint: rgba(147, 31, 43, 0.08); --color-brand-tint-hard: rgba(147, 31, 43, 0.16); /* --- Поверхности -------------------------------------------------------- Тёплая слоновая кость вместо стерильного белого. Основной фон приложения чуть темнее карточек — карточка «всплывает» без тяжёлой тени. */ --color-background: #F4F2EF; --color-surface: #FFFFFF; --color-surface-soft: #EFEDE8; --color-surface-warm: #E8E4DC; --color-surface-sunk: #FAF9F7; --color-surface-ink: #171614; /* тёмные презентационные поверхности */ --color-surface-ink-soft: #232120; /* --- Текст -------------------------------------------------------------- */ --color-text-primary: #171614; --color-text-secondary: #6B675F; --color-text-tertiary: #9A958C; --color-text-quiet: #B5B0A6; --color-text-inverse: #FFFFFF; --color-text-inverse-dim: rgba(255, 255, 255, 0.68); /* --- Границы ------------------------------------------------------------ */ --color-border: rgba(23, 22, 20, 0.08); --color-border-strong: rgba(23, 22, 20, 0.14); --color-border-hairline: rgba(23, 22, 20, 0.05); --color-border-inverse: rgba(255, 255, 255, 0.16); /* --- Статусы (спокойные, благородные) ----------------------------------- Используются для чипов и подписей; всегда сопровождаются текстом, информация никогда не передаётся одним лишь цветом. */ --color-success: #3F6B52; --color-success-soft: #EDF2EE; --color-warning: #9A6516; --color-warning-soft: #F7F1E6; --color-danger: #A03A3A; --color-danger-soft: #F7EDEC; --color-info: #4A6275; --color-info-soft: #EDF0F3; --color-neutral-soft: #F0EEE9; /* --- Стадии заявки ------------------------------------------------------ Восходящая прогрессия «серый → зелёный» читается как продвижение. Применяются только точками 8px рядом с текстовой подписью. */ --stage-new: #A8A296; --stage-work: #7D8A96; --stage-offer: #6E8199; --stage-accept: #6C8878; --stage-review: #B0762A; --stage-approved: #4E8062; --stage-signed: #3D6E52; --stage-realised: #2C5A41; --stage-declined: #B08D8D; /* --- Палитра диаграмм --------------------------------------------------- Категориальные слоты (ровно 3 — качество входящего потока) прошли проверку scripts/validate_palette.js: полоса светлоты, порог насыщенности, разделимость при дальтонизме (ΔE 17.2 deutan), контраст к поверхности. Все остальные графики — одноцветные: величина уже закодирована длиной. */ --chart-cat-1: #93202C; /* целевые */ --chart-cat-2: #16689B; /* нецелевые */ --chart-cat-3: #B0762A; /* неразобранные */ --chart-primary: #93202C; --chart-primary-fill: rgba(147, 32, 44, 0.10); --chart-primary-fill-2: rgba(147, 32, 44, 0.02); --chart-muted: #C9C3B8; --chart-grid: rgba(23, 22, 20, 0.06); --chart-axis: #9A958C; --chart-surface: #FFFFFF; /* --- Типографика -------------------------------------------------------- */ --font-display: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace; /* Шкала: редакционная сверху, компактная снизу */ --text-hero: clamp(2.25rem, 1.4rem + 2.6vw, 3.5rem); /* 36 → 56 */ --text-display: clamp(1.75rem, 1.2rem + 1.8vw, 2.625rem); /* 28 → 42 */ --text-figure: clamp(1.5rem, 1.1rem + 1.3vw, 2.125rem); /* 24 → 34 */ --text-h1: 1.75rem; /* 28 */ --text-h2: 1.375rem; /* 22 */ --text-h3: 1.0625rem; /* 17 */ --text-body: 0.9375rem; /* 15 */ --text-sm: 0.875rem; /* 14 */ --text-xs: 0.8125rem; /* 13 */ --text-2xs: 0.75rem; /* 12 */ --text-micro: 0.6875rem; /* 11 */ --leading-tight: 1.08; --leading-snug: 1.25; --leading-normal: 1.5; --leading-relaxed:1.65; --tracking-tighter: -0.03em; --tracking-tight: -0.018em; --tracking-normal: -0.006em; --tracking-wide: 0.02em; --tracking-caps: 0.09em; --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; /* --- Пространство (шаг 4px) --------------------------------------------- */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-7: 2rem; /* 32 */ --space-8: 2.5rem; /* 40 */ --space-9: 3rem; /* 48 */ --space-10: 4rem; /* 64 */ --space-11: 5rem; /* 80 */ /* --- Геометрия ---------------------------------------------------------- */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 18px; --radius-xl: 24px; --radius-2xl: 32px; --radius-pill: 999px; /* --- Тени (почти незаметные, тёплые) ------------------------------------ */ --shadow-hairline: 0 0 0 1px var(--color-border); --shadow-xs: 0 1px 2px rgba(23, 22, 20, 0.04); --shadow-sm: 0 1px 3px rgba(23, 22, 20, 0.05), 0 1px 2px rgba(23, 22, 20, 0.03); --shadow-md: 0 4px 16px rgba(23, 22, 20, 0.06), 0 1px 3px rgba(23, 22, 20, 0.04); --shadow-lg: 0 12px 36px rgba(23, 22, 20, 0.09), 0 2px 8px rgba(23, 22, 20, 0.04); --shadow-xl: 0 24px 64px rgba(23, 22, 20, 0.14), 0 4px 12px rgba(23, 22, 20, 0.05); --shadow-brand: 0 6px 20px rgba(147, 31, 43, 0.18); /* --- Раскладка ---------------------------------------------------------- */ --sidebar-width: 270px; --sidebar-width-collapsed: 76px; --topbar-height: 68px; --content-max: 1560px; --content-pad-x: clamp(1.25rem, 0.5rem + 2vw, 3rem); /* --- Движение ----------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-inout: cubic-bezier(0.65, 0.05, 0.36, 1); --ease-soft: cubic-bezier(0.33, 1, 0.68, 1); --dur-fast: 180ms; --dur-base: 240ms; --dur-slow: 320ms; --dur-slower: 400ms; --t-fast: var(--dur-fast) var(--ease-out); --t-base: var(--dur-base) var(--ease-out); --t-slow: var(--dur-slow) var(--ease-soft); /* --- Слои --------------------------------------------------------------- */ --z-base: 1; --z-sticky: 30; --z-sidebar: 40; --z-topbar: 45; --z-dropdown: 60; --z-panel: 70; --z-modal: 80; --z-toast: 90; } /* Уважаем системную настройку «уменьшить движение» */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-slower: 1ms; } }