/**
* BOTIX Design Tokens — единый источник правды.
* Согласовано с docs/BRANDBOOK.md (2026-04-18, Design Migration).
*
* Подключается первым в цепочке CSS:
*
*
*
*
* Правила:
* - Никаких фиолетовых цветов.
* - Только Apple-палитра для greys в light-теме.
* - Slate-палитра остаётся только для dark-темы.
* - Все контейнерные max-width должны идти через --w-*.
* - Все крупные шрифты (≥22px) — через --fs-*.
* - Mobile-first: новый контент проектируем с 375px.
*/
/* ============================================================
LIGHT THEME (default)
============================================================ */
:root {
/* === BRAND === */
--brand-red: #E53935; /* логотип BOTIX */
--brand-red-dark: #C62828;
/* === PRIMARY (Apple Blue) === */
--primary: #007AFF;
--primary-dark: #0056CC;
--primary-light: #409CFF;
--primary-soft: #DBEAFE; /* пастельный фон */
--primary-tint: rgba(0, 122, 255, 0.1);
/* === SEMANTIC === */
--success: #34C759;
--success-soft: #D1FAE5;
--success-tint: rgba(52, 199, 89, 0.1);
--danger: #FF3B30;
--danger-soft: #FEE2E2;
--danger-tint: rgba(255, 59, 48, 0.1);
--warning: #FF9F0A;
--warning-soft: #FEF3C7;
--warning-tint: rgba(255, 159, 10, 0.1);
/* === TEXT (Apple greys) === */
--text: #1D1D1F;
--text-secondary: #6E6E73;
--text-muted: #86868B;
--text-tertiary: #AEAEB2;
/* === SURFACES === */
--bg: #F5F5F7;
--bg-card: #FFFFFF;
--bg-card-hover: #FAFAFB;
--bg-input: #FFFFFF;
/* === BORDERS === */
--border: rgba(60, 60, 67, 0.08);
--border-strong: rgba(60, 60, 67, 0.12);
--border-focus: var(--primary);
/* === WIDTHS (контейнерные) === */
--w-narrow: 420px; /* auth, узкая колонка, компактные формы */
--w-text: 640px; /* одна колонка читаемого текста */
--w-content: 800px; /* карточки настроек, средние секции */
--w-wide: 1100px; /* основной контейнер лендинга и кабинета */
--w-page: 1280px; /* максимум для широких дашбордов */
/* === WIDTHS (модалки) === */
--w-modal-sm: 400px; /* стандарт BOTIX */
--w-modal-md: 560px; /* средняя */
--w-modal-lg: 720px; /* большая */
/* === FONT FAMILY === */
--font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
/* === FONT SIZES === */
--fs-xs: 11px; /* бейджи, метки */
--fs-sm: 12px; /* ячейки таблиц, капшн */
--fs-body: 13px; /* основной текст в кабинете */
--fs-base: 14px; /* body text, формы, кнопки */
--fs-md: 16px; /* подзаголовки, списки */
--fs-lg: 18px; /* заголовки блоков */
--fs-xl: 22px; /* H3, KPI-label крупные */
--fs-2xl: 28px; /* H2, KPI-value-big */
--fs-3xl: 32px; /* H1 кабинета */
--fs-hero: 40px; /* H1 лендинга */
--fs-hero-xl: 72px; /* hero title главной */
/* === SPACING === */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
/* === RADII === */
--r-sm: 8px;
--r-md: 12px;
--r-lg: 14px;
--r-xl: 16px;
--r-pill: 9999px;
/* === BREAKPOINTS (для справки и JS) === */
--bp-sm: 480px; /* крупный смартфон */
--bp-md: 768px; /* планшет portrait */
--bp-lg: 1024px; /* планшет landscape / небольшой десктоп */
--bp-xl: 1280px; /* десктоп */
/* === TRANSITIONS === */
--transition-fast: 0.15s ease;
--transition-base: 0.25s ease;
--transition-slow: 0.4s ease;
/* ============================================================
ОБРАТНАЯ СОВМЕСТИМОСТЬ
Старые --ui-* алиасы — чтобы не ломать существующий CSS
пока идёт миграция. Удалить после Этапа 3.
============================================================ */
--ui-primary: var(--primary);
--ui-primary-dark: var(--primary-dark);
--ui-primary-light: var(--primary-light);
--ui-success: var(--success);
--ui-success-bg: var(--success-tint);
--ui-warning: var(--warning);
--ui-warning-bg: var(--warning-tint);
--ui-danger: var(--danger);
--ui-danger-bg: var(--danger-tint);
--ui-info: var(--primary);
--ui-info-bg: var(--primary-tint);
--ui-bg: var(--bg);
--ui-bg-secondary: var(--bg-card);
--ui-bg-card: var(--bg-card);
--ui-bg-card-hover: var(--bg-card-hover);
--ui-bg-input: var(--bg-input);
--ui-text: var(--text);
--ui-text-muted: var(--text-muted);
--ui-text-secondary: var(--text-secondary);
--ui-border: var(--border);
--ui-border-focus: var(--border-focus);
--ui-font: var(--font);
--ui-font-xs: var(--fs-sm);
--ui-font-sm: var(--fs-body);
--ui-font-base: var(--fs-base);
--ui-font-md: 15px;
--ui-font-lg: var(--fs-md);
--ui-font-xl: var(--fs-lg);
--ui-font-2xl: var(--fs-xl);
--ui-font-3xl: var(--fs-2xl);
--ui-font-4xl: var(--fs-3xl);
--ui-font-5xl: var(--fs-hero);
--ui-space-1: var(--space-1);
--ui-space-2: var(--space-2);
--ui-space-3: var(--space-3);
--ui-space-4: var(--space-4);
--ui-space-5: var(--space-5);
--ui-space-6: var(--space-6);
--ui-space-8: var(--space-8);
--ui-space-10: var(--space-10);
--ui-space-12: var(--space-12);
--ui-space-16: var(--space-16);
--ui-radius-xs: 4px;
--ui-radius-sm: 6px;
--ui-radius-md: var(--r-sm);
--ui-radius-lg: var(--r-md);
--ui-radius-xl: var(--r-xl);
--ui-radius-2xl: 20px;
--ui-radius-full: var(--r-pill);
--ui-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
--ui-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
--ui-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.12);
--ui-shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.15);
--ui-transition-fast: var(--transition-fast);
--ui-transition-base: var(--transition-base);
--ui-transition-slow: var(--transition-slow);
}
/* ============================================================
DARK THEME
Slate-палитра остаётся — подходит для тёмной темы.
============================================================ */
[data-theme="dark"] {
/* Surface */
--bg: #0F172A;
--bg-card: #1E293B;
--bg-card-hover: #334155;
--bg-input: #0F172A;
/* Text */
--text: #F8FAFC;
--text-secondary: #CBD5E1;
--text-muted: #94A3B8;
--text-tertiary: #64748B;
/* Borders */
--border: #334155;
--border-strong: #475569;
/* Legacy aliases */
--ui-bg: var(--bg);
--ui-bg-secondary: var(--bg-card);
--ui-bg-card: var(--bg-card);
--ui-bg-card-hover: var(--bg-card-hover);
--ui-bg-input: var(--bg-input);
--ui-text: var(--text);
--ui-text-muted: var(--text-muted);
--ui-text-secondary: var(--text-secondary);
--ui-border: var(--border);
--ui-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
--ui-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
--ui-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.4);
--ui-shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.5);
}