/* src/public/css/tokens.css * Дизайн-токены — палитра, типографика, отступы. * Всё через CSS-переменные. Хардкод hex — только в этом файле. * Документация: docs/source/design-system.md */ :root { /* Оформление зафиксировано светлым: тёмная схема браузера не должна перекрашивать поля, списки и скроллбары. */ color-scheme: light; /* === Цвета (Aesop Cream) === */ --bg: #F5F1EA; --surface: #FAF7F2; --surface-hover: #F0EBE2; --border: #E8E2D5; --border-soft: #EFE9DD; --text: #2B2419; --text-muted: #7A6E5D; --accent: #A0522D; --accent-soft: #C97B4A; --accent-bg: #F4E9DD; --accent-fg: #FFFFFF; /* === Статусы === */ --status-want: #A0522D; --status-bought: #7C8C5A; --status-skipped: #8B7E6E; --status-locked: #2B2419; --status-interested: #B87930; --status-considering: #7A6E5D; --status-cancelled: #9B3A2E; --status-want-bg: #F4E9DD; --status-bought-bg: #ECEFE3; --status-skipped-bg: #EFEAE2; --status-locked-bg: #EBE5DA; --status-interested-bg: #F8ECDA; --status-considering-bg: #EFEAE2; --status-cancelled-bg: #F5E5E0; /* === Семантические === */ --danger: #9B3A2E; --danger-bg: #F5E5E0; --warning: #B87930; --warning-bg: #F8ECDA; /* === Типографика === * --font-scale — множитель размера шрифта. Меняется настройкой в приложении * (см. .settings-panel в app.css, логика в app.js). Дефолт — 0.9 (компактнее). */ --font-scale: 0.9; /* Масштаб эмодзи-реакций (настройка «Размер эмодзи»). */ --emoji-scale: 1; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, monospace; --fs-xs: calc(12px * var(--font-scale)); --fs-sm: calc(13px * var(--font-scale)); --fs-md: calc(14px * var(--font-scale)); --fs-base: calc(15px * var(--font-scale)); --fs-lg: calc(17px * var(--font-scale)); --fs-xl: calc(20px * var(--font-scale)); --fs-2xl: calc(26px * var(--font-scale)); --lh-tight: 1.4; --lh-base: 1.55; --lh-loose: 1.7; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-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; --container-max: 1280px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; /* === Тайминги === */ --t-fast: 150ms; --t-base: 200ms; --ease: ease-out; } /* === Тёмная тема (тёплая) === * Включается атрибутом data-theme="dark" на (переключатель в шестерёнке). * Сохраняет тёплую палитру: тёмно-коричневая база + оранжевый акцент. */ :root[data-theme="dark"] { color-scheme: dark; --bg: #1E1912; --surface: #272117; --surface-hover: #332B1F; --border: #3E3526; --border-soft: #332C1F; --text: #F1E9DB; --text-muted: #A99A83; --accent: #C98A5B; --accent-soft: #D89A6B; --accent-bg: #3A2C1F; --accent-fg: #1E1912; /* === Статусы (тёмные) === */ --status-want: #C98A5B; --status-bought: #9BB06E; --status-skipped: #A99A83; --status-locked: #F1E9DB; --status-interested: #D9A34A; --status-considering: #A99A83; --status-cancelled: #D9705C; --status-want-bg: #3A2C1F; --status-bought-bg: #2E3325; --status-skipped-bg: #332C21; --status-locked-bg: #332B1F; --status-interested-bg: #3B2F1C; --status-considering-bg: #332C21; --status-cancelled-bg: #3A2620; /* === Семантические (тёмные) === */ --danger: #D9705C; --danger-bg: #3A2620; --warning: #D9A34A; --warning-bg: #3B2F1C; }