/* Токены дизайн-системы Monta Hub. Источник — артефакт «Monta Hub» (Design System), значения перенесены один в один. Тёмная тема — лицо бренда и значение по умолчанию. Три режима (cookie mh_theme, ui/theme.py): - «Система»: атрибута на нет, тема — из prefers-color-scheme; - «Світла» / «Темна»: сервер ставит . */ :root { --bg: #0a0714; --surface: #120d22; --surface-raised: #1a1430; --surface-sunken: #07050f; --row-hover: #1f1838; --line: #2a2247; --line-strong: #6e5eb0; --ink: #f1ecff; --ink-muted: #aaa1cc; --ink-faint: #8a81b0; --accent: #b784ff; --accent-strong: #8e2de2; --on-accent: #ffffff; --accent-soft: #2a1650; --cyan: #3be8ff; --cyan-soft: #06303a; --magenta: #ff5cd6; --magenta-soft: #3a1036; --gain: #41f0a4; --gain-soft: #0b3325; --loss: #ff6b8b; --loss-soft: #3d0f1c; --warn: #ffc857; --warn-soft: #3a2a07; --focus-ring: #3be8ff; --brand-violet: #8e2de2; --brand-indigo: #4a00e0; --brand-pink: #ff4ecd; --chart-cost: var(--magenta); --chart-confirmed: var(--cyan); --chart-expected: var(--accent); --chart-grid: var(--line); --chart-text: var(--ink-muted); --shadow-card: 0 0 0 1px rgba(183,132,255,0.08), 0 12px 32px rgba(0,0,0,0.45); --shadow-glow: 0 0 0 1px rgba(183,132,255,0.55), 0 0 28px rgba(142,45,226,0.45); --shadow-glow-cyan: 0 0 14px rgba(59,232,255,0.55); color-scheme: dark; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px; --font-display: "Unbounded", "Manrope", system-ui, sans-serif; --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: #f5f3fb; --surface: #ffffff; --surface-raised: #faf8ff; --surface-sunken: #efecf8; --row-hover: #f6f1ff; --line: #e3ddf3; --line-strong: #8a80b3; --ink: #16102c; --ink-muted: #5a5378; --ink-faint: #6e6790; --accent: #7b1fd8; --accent-strong: #8e2de2; --on-accent: #ffffff; --accent-soft: #f1e8ff; --cyan: #00758c; --cyan-soft: #e0f7fb; --magenta: #b8127f; --magenta-soft: #ffe6f6; --gain: #0a7a4b; --gain-soft: #e3f7ee; --loss: #c4163f; --loss-soft: #fde8ed; --warn: #9a5b00; --warn-soft: #fff3dc; --focus-ring: #7b1fd8; --shadow-card: 0 1px 2px rgba(22,16,44,0.06), 0 8px 24px rgba(22,16,44,0.06); --shadow-glow: 0 0 0 1px rgba(123,31,216,0.35), 0 8px 22px rgba(123,31,216,0.16); --shadow-glow-cyan: 0 0 0 3px rgba(0,117,140,0.14); color-scheme: light; } } :root[data-theme="light"] { --bg: #f5f3fb; --surface: #ffffff; --surface-raised: #faf8ff; --surface-sunken: #efecf8; --row-hover: #f6f1ff; --line: #e3ddf3; --line-strong: #8a80b3; --ink: #16102c; --ink-muted: #5a5378; --ink-faint: #6e6790; --accent: #7b1fd8; --accent-strong: #8e2de2; --on-accent: #ffffff; --accent-soft: #f1e8ff; --cyan: #00758c; --cyan-soft: #e0f7fb; --magenta: #b8127f; --magenta-soft: #ffe6f6; --gain: #0a7a4b; --gain-soft: #e3f7ee; --loss: #c4163f; --loss-soft: #fde8ed; --warn: #9a5b00; --warn-soft: #fff3dc; --focus-ring: #7b1fd8; --shadow-card: 0 1px 2px rgba(22,16,44,0.06), 0 8px 24px rgba(22,16,44,0.06); --shadow-glow: 0 0 0 1px rgba(123,31,216,0.35), 0 8px 22px rgba(123,31,216,0.16); --shadow-glow-cyan: 0 0 0 3px rgba(0,117,140,0.14); color-scheme: light; }