/* tokens.css — design system для CRM «Комфортный этаж». * Подключается ПЕРВЫМ в каждой HTML-страницы CRM. * Используй var(--*) ВЕЗДЕ вместо hex-литералов. * Создан 20.08.2026 по итогам UI-аудита 106 скринов. * См. .planning/audits/2026-08-20-ui-design-audit-FULL.md */ :root { /* === BRAND: greens === */ --green: #208272; /* primary, 193 использования */ --green-dark: #1a6b5a; /* hover, sidebar darker */ --green-darker: #186556; /* sidebar gradient bottom */ --green-light: #2ea892; /* mint accent, links */ --green-mint: #e8f5f1; /* success background */ --green-pale: #d1fae5; /* success border, badge */ /* === STATUS === */ --red: #dc2626; --red-bg: #fef2f2; --red-border: #fecaca; --red-text: #991b1b; --orange: #ea580c; --orange-bg: #fef3c7; --orange-text: #92400e; --green-status: #16a34a; --purple: #7c3aed; --blue: #2563eb; /* ANTI-PATTERN — в primary-кнопках НЕ использовать */ --blue-anti: var(--green); /* алиас для sed-миграции */ /* === BACKGROUND: 4 ступени (вместо 6 почти-белых) === */ --bg-page: #f5f3ef; /* warm beige, brand — основной фон страниц */ --bg-card: #ffffff; /* карточки, модалки, таблицы */ --bg-subtle: #fafbfc; /* zebra rows, hover, вторичный */ --bg-cold: #f5f7fa; /* analytics/dashboard cold variant */ --bg-zebra: #f9fafb; /* чередующиеся строки */ /* === TEXT === */ --text: #1a1a1a; --text-secondary: #6b7280; --text-muted: #9ca3af; --text-on-green: #ffffff; /* === BORDER === */ --border: #e5e7eb; --border-strong: #d1d5db; --border-soft: #f0f0f0; /* === TYPOGRAPHY: 7-ступенчатая шкала (вместо 15) === */ --font-xs: 11px; /* мелкие подписи, badge */ --font-sm: 12px; /* caption, secondary */ --font-md: 13px; /* default для 90% UI */ --font-base: 14px; /* body, текст */ --font-lg: 15px; /* buttons */ --font-xl: 16px; /* H2, важные подписи */ --font-2xl: 18px; /* H1 topbar (UNIFIED), dialog title */ --font-3xl: 20px; /* page title large */ --font-4xl: 22px; /* KPI numbers small */ --font-5xl: 26px; /* KPI numbers large */ --font-6xl: 32px; /* KPI hero */ /* === SPACING: 4-step scale (вместо 12+) === */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-8: 48px; /* === INPUTS === */ --input-pad-y: 8px; /* было 5-10, теперь 8 */ --input-pad-x: 12px; --input-radius: 6px; --input-border-w: 1px; --input-bg: var(--bg-card); --input-focus-ring: 0 0 0 2px var(--green-mint); /* === BUTTONS === */ --btn-pad-y: 8px; --btn-pad-x: 16px; --btn-radius: 6px; --btn-border-w: 0; /* primary: 0, secondary: 1 */ --btn-font-size: var(--font-base); /* === LAYOUT === */ --sidebar-w: 220px; --topbar-h: 56px; --content-max: 1280px; /* === RADIUS === */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-pill: 999px; } /* === GLOBAL RESETS (были пропущены, отсюда box-sizing баги) === */ *, *::before, *::after { box-sizing: border-box; } /* === GLOBAL ELEMENT STYLES === */ body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto, sans-serif; font-size: var(--font-base); color: var(--text); background: var(--bg-page); line-height: 1.5; } /* H1 в топбаре — единый размер ВЕЗДЕ (было 5 разных) */ .topbar h1 { font-size: var(--font-2xl); font-weight: 600; margin: 0; line-height: 1.2; } h2 { font-size: var(--font-xl); font-weight: 600; margin: 0 0 var(--space-3); } h3 { font-size: var(--font-lg); font-weight: 600; margin: 0 0 var(--space-2); } a { color: var(--green); text-decoration: none; } a:hover { color: var(--green-dark); text-decoration: underline; } /* Input — единый padding (было 8 вариантов) */ input:not([type="checkbox"]):not([type="radio"]):not([type="date"]):not([type="file"]):not([type="submit"]):not([type="button"]), textarea, select { padding: var(--input-pad-y) var(--input-pad-x); border-radius: var(--input-radius); border: var(--input-border-w) solid var(--border); background: var(--input-bg); font-size: var(--font-md); font-family: inherit; color: var(--text); transition: border-color 0.15s, box-shadow 0.15s; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--green); box-shadow: var(--input-focus-ring); } /* === BUTTONS: единый класс === */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: var(--btn-pad-y) var(--btn-pad-x); border-radius: var(--btn-radius); border: var(--btn-border-w) solid transparent; background: var(--bg-subtle); color: var(--text); font-size: var(--btn-font-size); font-weight: 500; cursor: pointer; text-decoration: none; transition: background 0.15s, border-color 0.15s, color 0.15s; font-family: inherit; line-height: 1.4; } .btn:hover { background: var(--border-soft); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary { background: var(--green); color: var(--text-on-green); border-color: var(--green); } .btn-primary:hover { background: var(--green-dark); border-color: var(--green-dark); } .btn-secondary { background: var(--bg-card); color: var(--text); border-color: var(--border); } .btn-secondary:hover { background: var(--bg-subtle); } .btn-danger { background: var(--red); color: var(--text-on-green); border-color: var(--red); } .btn-danger:hover { background: #b91c1c; border-color: #b91c1c; } .btn-ghost { background: transparent; color: var(--text-secondary); border-color: transparent; } .btn-ghost:hover { background: var(--bg-subtle); color: var(--text); } .btn-sm { padding: 4px 10px; font-size: var(--font-sm); } .btn-lg { padding: 12px 24px; font-size: var(--font-lg); } /* === CARDS === */ .card { background: var(--bg-card); border-radius: var(--radius-lg); border: 1px solid var(--border); padding: var(--space-4); } .card-header { margin: 0 0 var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--border); } /* === TABLES === */ table { border-collapse: collapse; width: 100%; } th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); } th { font-weight: 600; color: var(--text-secondary); font-size: var(--font-sm); text-transform: uppercase; letter-spacing: 0.3px; } tbody tr:hover { background: var(--bg-zebra); } /* === UI-3.10: семантические токены для inline-стилей === * Алиасы для hex-литералов, которые раньше были захардкожены в style="...": * badges, info-blocks, status-pills. Покрывают топ-10 hex из UI-3.10. */ :root { --info-bg: #f0f9ff; /* light blue background */ --info-border: #bae6fd; /* light blue border */ --info-text: #0c4a6e; /* dark blue text */ --info-accent: #0ea5e9; /* sky blue */ --success-bg: #f0fdf4; /* light green background */ --success-border: #bbf7d0; /* light green border */ --success-text: #166534; /* dark green text */ --success-accent: #15803d; /* medium green */ --warning-bg: #fffbeb; /* light yellow background */ --warning-border: #fde68a; /* light yellow border */ --warning-text: #92400e; /* dark yellow/brown text */ --dark: #1f2937; /* dark gray for tooltip backgrounds */ --white: #ffffff; /* explicit white */ --red-dark: #991b1b; /* dark red text */ --red-pale: #fee2e2; /* pale red background */ --green-dark-text: #065f46;/* dark green for delta-up text */ }