/* ============================================================ Life Assistant 3.0 — Design Tokens Четыре комбинации: тема (light/dark) × режим (personal/work) Применять: и т.д. ============================================================ */ /* ── FROST LIGHT × PERSONAL (default) ── */ :root { --bg: #F4F6FB; --sb-bg: #FFFFFF; --main-bg: #F4F6FB; --card-bg: #FFFFFF; --card-brd: rgba(0,0,0,.07); --brd: rgba(0,0,0,.08); --text: #0D1117; --text2: #374151; --muted: rgba(13,17,23,.40); --ac: #2563EB; --ac2: #7C3AED; --ac-g: linear-gradient(135deg, #2563EB, #7C3AED); --ac-s: rgba(37,99,235,.10); --sha: 0 4px 18px rgba(37,99,235,.22); --nav-act: rgba(37,99,235,.09); --mp-bg: rgba(0,0,0,.05); --mp-slider: rgba(37,99,235,.14); --theme-ico-bg: rgba(0,0,0,.05); --theme-ico-brd: rgba(0,0,0,.07); --sb-color: #0D1117; --sh1: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); --sh2: 0 4px 20px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.05); } /* ── FROST LIGHT × WORK ── */ :root.work { --bg: #F3F8F5; --main-bg: #F3F8F5; --text: #071810; --text2: #1A3A28; --muted: rgba(7,24,16,.40); --ac: #059669; --ac2: #0D9488; --ac-g: linear-gradient(135deg, #059669, #0D9488); --ac-s: rgba(5,150,105,.10); --sha: 0 4px 18px rgba(5,150,105,.22); --nav-act: rgba(5,150,105,.09); --mp-slider: rgba(5,150,105,.14); --sb-color: #071810; } /* ── SLATE DARK × PERSONAL ── */ :root.dark { --bg: #0F1117; --sb-bg: #181C27; --main-bg: #0F1117; --card-bg: #181C27; --card-brd: rgba(255,255,255,.07); --brd: rgba(255,255,255,.08); --text: #E8ECF8; --text2: #A8B4D0; --muted: rgba(232,236,248,.36); --ac: #3B82F6; --ac2: #4338CA; --ac-g: linear-gradient(135deg, #1D4ED8, #4338CA); --ac-s: rgba(59,130,246,.14); --sha: 0 4px 20px rgba(59,130,246,.28); --nav-act: rgba(59,130,246,.12); --mp-bg: rgba(255,255,255,.06); --mp-slider: rgba(59,130,246,.22); --theme-ico-bg: rgba(255,255,255,.06); --theme-ico-brd: rgba(255,255,255,.08); --sb-color: #E8ECF8; --sh1: 0 1px 4px rgba(0,0,0,.35); --sh2: 0 4px 24px rgba(0,0,0,.50); } /* ── SLATE DARK × WORK ── */ :root.dark.work { --bg: #0F1410; --sb-bg: #161F17; --main-bg: #0F1410; --card-bg: #161F17; --text: #E8F4EA; --text2: #A0C8AA; --muted: rgba(232,244,234,.36); --ac: #22C55E; --ac2: #0F766E; --ac-g: linear-gradient(135deg, #15803D, #0F766E); --ac-s: rgba(34,197,94,.14); --sha: 0 4px 20px rgba(34,197,94,.28); --nav-act: rgba(34,197,94,.12); --mp-slider: rgba(34,197,94,.22); --sb-color: #E8F4EA; } /* ── ОБЩИЕ РАДИУСЫ И РАЗМЕРЫ ── */ :root { --radius-sm: 7px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --nav-h: 56px; /* мобильный */ --fab-size: 30px; --fab-ring: 36px; --fab-lift: 10px; } /* ── REDUCED MOTION ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }