/* Дизайн-токены прототипа. Один набор на :root — single-theme MJ Light. В Phase 3 этот же файл переносится в Django как static/code/styles/tokens.css. */ :root { /* Brand */ --color-primary: #ff4c90; --color-primary-rgb: 255 76 144; /* channels для rgb(... / alpha) */ --color-primary-hover: #f03a7f; --color-primary-pressed: #dc2872; --color-primary-soft: #ffe0ec; --color-on-primary: #ffffff; --color-legacy-red: #d83b4b; /* старый бренд-цвет; зарезервирован для постепенной миграции в Phase 3 */ /* Semantic */ --color-success: #16a34a; --color-danger: #dc2626; --color-warning: #d97706; /* Surfaces */ --surface-page: #ffffff; --surface-sidebar: #fafafa; --surface-card: #ffffff; --surface-hover: #f5f5f5; /* Text */ --text-primary: #171717; --text-secondary: #404040; --text-muted: #737373; /* Border */ --border-default: #e5e5e5; --border-hover: #a8a8a8; --border-strong: #d4d4d4; /* Radius — MJ-style минимальные */ --radius-none: 0px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 16px; --radius-full: 9999px; /* Shadow */ --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.12); /* Type */ --font-display: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; --text-xs: 11px; --text-sm: 13px; --text-base: 15px; --text-md: 17px; --text-lg: 20px; --text-xl: 24px; --text-2xl: 28px; --text-3xl: 34px; --sidebar-width: 240px; } /* ── Тёмная тема ─────────────────────────────────────────────────────────── Активируется data-theme="dark" (прототип, на ) ИЛИ классом .theme-dark (Django — custom.js вешает его на ). Переопределяем только нужные токены, остальное (бренд-розовый, радиусы, типографика) наследуется из :root. */ :root[data-theme="dark"], .theme-dark { --surface-page: #0f0f11; --surface-sidebar: #17171a; --surface-card: #1d1d21; --surface-hover: #2a2a30; --text-primary: #f3f3f4; --text-secondary: #c2c2c8; --text-muted: #8a8a93; --border-default: #2c2c33; --border-hover: #4a4a54; --border-strong: #44444d; /* Бренд-розовый оставляем; светлый pink-тинт заменяем тёмным (бейджи/баблы) */ --color-primary-soft: #3a1f2b; /* Тени на тёмном — глубже */ --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.6); }