/* * RentClub — токены дизайна (A-59, A-108). * Эталон — рабочий сайт: CRM мерчанта и админка (merchant.rentclub.uz, admin.rentclub.uz, код crm/ в main). * Сверено 04.11.2026. Где прод расходится с макетом Figma «RentClub 2.0», взят прод (решение владельца). * Тот же набор лежит в tokens.json. Правьте оба файла вместе. * * Все имена начинаются с --rc-, чтобы не пересекаться со старыми переменными CRM. * Шрифты файл не загружает: подключение описано в README.md. */ :root { /* --- Бренд --- */ --rc-accent: #712bfa; /* основной фиолетовый интерфейса: кнопки, ссылки, активный пункт меню */ --rc-accent-fg: #ffffff; /* текст на фиолетовом */ --rc-accent-pale: #f2ebff; /* светлая подложка фиолетового: выбранная строка, бейдж, «сегодня» */ --rc-logo-violet: #6b2bff; /* цвет логотипа, только в файлах логотипа — в интерфейсе не использовать */ --rc-logo-night: #14102a; /* тёмный цвет надписи логотипа */ --rc-logo-lime: #c8ff3d; /* лаймовая точка логотипа на тёмном фоне */ /* --- Фон и поверхности --- */ --rc-bg: #f6f7fa; /* фон страницы */ --rc-surface: #ffffff; /* карточки, таблицы, окна */ --rc-surface-muted: #eef0f5; /* приглушённая плашка, неактивные элементы */ --rc-line: #e6e8ef; /* рамки и разделители */ /* --- Текст --- */ --rc-text: #172033; /* основной текст */ --rc-text-secondary: #667085; /* подписи, второстепенный текст, иконки */ /* --- Тёмное меню (левая колонка, нижнее меню телефона) --- */ --rc-night: #17152b; /* фон меню (прод) */ --rc-on-night: #ffffff; /* текст и иконки на меню (прод) */ --rc-on-night-muted: #c3c6d6; /* неактивные пункты меню */ --rc-on-night-line: rgba(255, 255, 255, .12); --rc-on-night-hover: rgba(255, 255, 255, .08); --rc-accent-on-night: #b89bff; /* иконка активного пункта нижнего меню телефона (прод) */ /* --- Смысловые цвета --- */ --rc-success: #15805d; --rc-success-bg: #e9f7ef; /* оплачено, активно */ --rc-warning: #b36a10; --rc-warning-bg: #fff5df; /* внимание, ремонт, долг скоро */ --rc-danger: #c63f47; --rc-danger-bg: #fdecee; /* ошибка, просрочка, отмена */ --rc-info: #712bfa; --rc-info-bg: #f2ebff; /* справка — в макете это фиолетовый */ /* --- Статусы аренды (A-61): один цвет и подпись везде — календарь, карточка, списки. Цвета по легенде календаря Figma (экран 07). --- */ --rc-status-booked: var(--rc-text); --rc-status-booked-bg: var(--rc-surface-muted); /* Забронирована («Бронь» в календаре) — серая, как на проде */ --rc-status-active: var(--rc-success); --rc-status-active-bg: var(--rc-success-bg); /* Активна (в макете «Выдана») */ --rc-status-awaiting-return: var(--rc-warning); --rc-status-awaiting-return-bg: var(--rc-warning-bg); /* Ожидает возврата */ --rc-status-closed: var(--rc-text-secondary); --rc-status-closed-bg: var(--rc-surface-muted); /* Закрыта */ --rc-status-cancelled: var(--rc-danger); --rc-status-cancelled-bg: var(--rc-danger-bg); /* Отменена */ /* Машина, не аренда: */ --rc-status-repair: var(--rc-warning); --rc-status-repair-bg: var(--rc-warning-bg); /* Сервис / в ремонте */ --rc-status-buyout: var(--rc-text-secondary); --rc-status-buyout-bg: var(--rc-bg); /* С выкупом · недоступна */ /* Выбранная аренда в календаре: фиолетовая рамка и подложка */ --rc-status-selected: var(--rc-accent); --rc-status-selected-bg: var(--rc-accent-pale); /* --- Шрифты --- */ --rc-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; /* весь интерфейс */ --rc-font-brand: "Roboto Condensed", "Arial Narrow", system-ui, sans-serif; /* логотип и крупные заголовки бренда, 600 */ --rc-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* госномера, номера договоров */ --rc-weight-regular: 400; --rc-weight-medium: 500; --rc-weight-semibold: 600; /* Размеры текста из макета (px). Основной текст 13–14, подписи 12. */ --rc-text-xs: 12px; /* подписи, бейджи, шапка таблицы */ --rc-text-sm: 13px; /* строки таблиц, поля форм */ --rc-text-md: 14px; /* основной текст, кнопки */ --rc-text-lg: 15px; /* заголовок карточки (h2 на проде) */ --rc-text-xl: 18px; /* заголовок блока, сумма в окне */ --rc-text-2xl: 22px; /* заголовок страницы (h1 на проде) */ --rc-text-3xl: 24px; /* крупные цифры на сводке (kpi на проде) */ --rc-leading: 1.4; /* --- Радиусы --- */ --rc-radius-xs: 4px; /* бейджи статусов («Аренда», «Просрочка»), клетки занятости (прод) */ --rc-radius-sm: 6px; --rc-radius-control: 8px; /* кнопки, поля, пункты меню */ --rc-radius-card: 12px; /* карточки, таблицы, окна */ --rc-radius-lg: 16px; /* большие окна, листы на телефоне */ --rc-radius-pill: 999px; /* фильтры-чипы, полоски прогресса (прод) */ /* --- Отступы (шкала макета, px) --- */ --rc-space-1: 4px; --rc-space-2: 8px; --rc-space-3: 12px; --rc-space-4: 16px; --rc-space-5: 20px; --rc-space-6: 24px; --rc-space-8: 32px; --rc-space-10: 40px; /* --- Прочее --- */ --rc-icon-size: 18px; /* иконки меню, линия 1.8, стиль Lucide */ --rc-icon-stroke: 1.8; --rc-shadow-card: none; /* карточки на проде — только рамка */ --rc-shadow-pop: 0 12px 32px rgba(23, 32, 51, .14); /* меню, окна (прод) */ --rc-input-bg: var(--rc-bg); /* поля на проде — серые с рамкой */ --rc-focus-ring: 0 0 0 3px rgba(113, 43, 250, .25); } /* * Тёмная тема — только по ручному выбору в Настройках (data-theme="dark"), по умолчанию светлая. * Основа — тёмная палитра прода, но акцент фиолетовый вместо золотого. */ :root[data-theme="dark"] { --rc-accent: #8c5cff; /* фиолетовый, светлее для тёмного фона */ --rc-accent-fg: #ffffff; --rc-accent-pale: #2a2148; --rc-bg: #0f1217; --rc-surface: #171c24; --rc-surface-muted: #1d232d; --rc-line: #2a313c; --rc-text: #e8ecf1; --rc-text-secondary: #98a2b0; --rc-night: #12101f; --rc-success: #4cc38a; --rc-success-bg: #17332a; --rc-warning: #e0b050; --rc-warning-bg: #3a2e14; --rc-danger: #ef7a70; --rc-danger-bg: #3a2220; --rc-info: #8c5cff; --rc-info-bg: #2a2148; --rc-input-bg: #1d232d; --rc-shadow-pop: 0 12px 32px rgba(0, 0, 0, .45); --rc-focus-ring: 0 0 0 3px rgba(140, 92, 255, .35); }