/* Дизайн-токены: цвета, тени, радиусы, анимации. Тёмная тема — по системной настройке или атрибуту data-theme на . */ :root { color-scheme: light dark; --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-num: "SF Pro Display", "Inter", "Segoe UI Variable Display", system-ui, sans-serif; --radius-xl: 26px; --radius-lg: 20px; --radius-md: 14px; --radius-sm: 10px; --dur: 190ms; --ease: cubic-bezier(0.22, 0.8, 0.26, 1); /* Высоты полей: одна сетка на всё приложение. */ --field: 44px; --field-lg: 54px; --gap: 14px; --page-max: 1180px; --sidebar-w: 236px; --nav-h: 66px; /* Светлая тема */ --bg: #eef1f7; --bg-2: #e4e9f3; --blob-1: rgba(99, 102, 241, 0.38); --blob-2: rgba(16, 185, 129, 0.22); --blob-3: rgba(236, 72, 153, 0.20); --glass: rgba(255, 255, 255, 0.62); --glass-strong: rgba(255, 255, 255, 0.82); --glass-soft: rgba(255, 255, 255, 0.4); --glass-border: rgba(255, 255, 255, 0.75); --glass-edge: rgba(15, 23, 42, 0.07); --glass-shadow: 0 10px 30px -12px rgba(15, 23, 42, 0.28), 0 2px 8px -4px rgba(15, 23, 42, 0.12); --text: #0d1117; --text-2: #465061; --text-3: #7b8595; --line: rgba(15, 23, 42, 0.12); --fill: rgba(15, 23, 42, 0.05); --fill-2: rgba(15, 23, 42, 0.09); /* Непрозрачная поверхность: поля и активные переключатели не должны просвечивать. */ --surface: #ffffff; /* Материал шторки: плотное матовое стекло — фон угадывается, но текст под ним не читается. Это середина между прозрачностью и глухой заливкой. */ --sheet-bg: rgba(255, 255, 255, 0.86); --sheet-blur: saturate(180%) blur(30px); --sheet-edge: rgba(255, 255, 255, 0.85); /* Затемнение под шторкой: на свету должно только приглушить фон, а не сереть его. */ --scrim: rgba(23, 31, 51, 0.3); /* Активная вкладка переключателя: белый «лист» на светлой теме. */ --segment-active: #ffffff; --segment-shadow: 0 1px 2px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.08); --accent: #5b5bf6; --accent-2: #8b5cf6; --accent-soft: rgba(91, 91, 246, 0.12); --income: #0ea56e; --expense: #e5484d; --warn: #f5a524; --neutral: #8e94a3; --blur: 26px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #080a0f; --bg-2: #0d1017; --blob-1: rgba(99, 102, 241, 0.34); --blob-2: rgba(16, 185, 129, 0.18); --blob-3: rgba(236, 72, 153, 0.16); --glass: rgba(24, 27, 35, 0.62); --glass-strong: rgba(30, 34, 44, 0.86); --glass-soft: rgba(255, 255, 255, 0.04); --glass-border: rgba(255, 255, 255, 0.1); --glass-edge: rgba(255, 255, 255, 0.06); --surface: rgba(255, 255, 255, 0.07); --sheet-bg: rgba(22, 25, 33, 0.82); --sheet-edge: rgba(255, 255, 255, 0.09); --scrim: rgba(4, 6, 12, 0.58); --segment-active: rgba(255, 255, 255, 0.14); --segment-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); --glass-shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.8), 0 2px 10px -6px rgba(0, 0, 0, 0.6); --text: #f2f5fa; --text-2: #a9b2c3; --text-3: #7d8597; --line: rgba(255, 255, 255, 0.09); --fill: rgba(255, 255, 255, 0.06); --fill-2: rgba(255, 255, 255, 0.1); --accent: #7c7cff; --accent-2: #a78bfa; --accent-soft: rgba(124, 124, 255, 0.16); --income: #2fd08a; --expense: #ff6b6b; } } :root[data-theme="dark"] { --bg: #080a0f; --bg-2: #0d1017; --blob-1: rgba(99, 102, 241, 0.34); --blob-2: rgba(16, 185, 129, 0.18); --blob-3: rgba(236, 72, 153, 0.16); --glass: rgba(24, 27, 35, 0.62); --glass-strong: rgba(30, 34, 44, 0.86); --glass-soft: rgba(255, 255, 255, 0.04); --glass-border: rgba(255, 255, 255, 0.1); --glass-edge: rgba(255, 255, 255, 0.06); --glass-shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.8), 0 2px 10px -6px rgba(0, 0, 0, 0.6); --text: #f2f5fa; --text-2: #a9b2c3; --text-3: #7d8597; --line: rgba(255, 255, 255, 0.09); --fill: rgba(255, 255, 255, 0.06); --fill-2: rgba(255, 255, 255, 0.1); --surface: rgba(255, 255, 255, 0.07); --sheet-bg: rgba(22, 25, 33, 0.82); --sheet-edge: rgba(255, 255, 255, 0.09); --scrim: rgba(4, 6, 12, 0.58); --segment-active: rgba(255, 255, 255, 0.14); --segment-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); --accent: #7c7cff; --accent-2: #a78bfa; --accent-soft: rgba(124, 124, 255, 0.16); --income: #2fd08a; --expense: #ff6b6b; }