/* design-tokens.css — единственный источник истины по дизайн-токенам. * Значения — из SYSTEM_DESIGN.md §1. CSS Custom Properties + темы. */ :root { /* === ЦВЕТА === */ --clr-primary: #7C6FCD; --clr-primary-hover: #6B5EBC; --clr-primary-light: #EEF0FF; --clr-text-1: #2D2640; /* Заголовки */ --clr-text-2: #6B6485; /* Основной текст */ --clr-text-3: #9E98B8; /* Плейсхолдеры, подписи */ --clr-success: #3DB88A; --clr-warning: #F0A030; --clr-error: #E05555; --clr-info: #4A9EE8; --clr-surface: #FFFFFF; --clr-surface-2: #F7F6FB; /* Карточки, фоны */ --clr-surface-3: #EFECF8; /* Hover состояния */ --clr-border: #E2DDEE; /* === ТИПОГРАФИКА === */ --font-heading: 'Nunito', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 18px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 30px; --text-4xl: 36px; --text-5xl: 48px; --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.65; /* Основной для нейроотличных */ --font-normal: 400; --font-medium: 500; --font-semi: 600; --font-bold: 700; /* === ОТСТУПЫ === */ --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; --space-20: 80px; /* === СКРУГЛЕНИЯ === */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; /* === ТЕНИ === */ --shadow-sm: 0 1px 3px rgba(44, 38, 64, 0.06); --shadow-md: 0 4px 12px rgba(44, 38, 64, 0.1); --shadow-lg: 0 8px 32px rgba(44, 38, 64, 0.14); /* === АНИМАЦИИ === */ --transition-fast: 150ms ease; --transition-normal: 250ms ease; --transition-slow: 400ms ease; /* === Z-INDEX === */ --z-base: 1; --z-sticky: 100; --z-overlay: 200; --z-modal: 300; --z-toast: 400; --z-tooltip: 500; /* === МАКЕТ === */ --container-max: 1140px; --sidebar-width: 240px; } /* Тёмная тема */ [data-theme="dark"] { --clr-primary: #9D93E0; --clr-primary-hover: #ABA2E8; --clr-primary-light: #2A2548; --clr-text-1: #F0EDF8; --clr-text-2: #C4BEDE; --clr-text-3: #887FA8; --clr-surface: #1A1628; --clr-surface-2: #221E33; --clr-surface-3: #2D2845; --clr-border: #352F50; } /* Приглушённая тема (сенсорная чувствительность) */ [data-theme="muted"] { --clr-primary: #8E8BAA; --clr-primary-hover: #7D7A99; --clr-success: #6BA892; --clr-warning: #B8955A; --clr-error: #B07070; --clr-surface: #FAF9FC; --clr-surface-2: #F3F1F7; --clr-surface-3: #EBE8F2; } /* Высокий контраст */ [data-theme="high-contrast"] { --clr-text-1: #000000; --clr-text-2: #111111; --clr-text-3: #333333; --clr-border: #000000; --clr-primary: #0000CC; --clr-primary-hover: #0000AA; --clr-surface: #FFFFFF; --clr-surface-2: #FFFFFF; --clr-surface-3: #F0F0F0; } /* Уважение системной настройки уменьшенного движения */ @media (prefers-reduced-motion: reduce) { :root { --transition-fast: 0ms; --transition-normal: 0ms; --transition-slow: 0ms; } } /* Явное отключение анимаций пользователем (атрибут на ) */ [data-reduced-motion="true"] { --transition-fast: 0ms; --transition-normal: 0ms; --transition-slow: 0ms; }