/* Токены «Финансового пульта» — единственное место, где живут цвета, размеры и ритм интерфейса (docs/DESIGN.md). Ни один экран не пишет цвет числом. Тема по умолчанию тёмная. Светлая появится позже, но её значения заложены сразу: иначе к моменту переключателя половина экранов уже будет держать тёмный цвет жёстко. */ :root { color-scheme: dark; /* --- поверхности и текст --- */ --bg-base: #0b1020; --bg-elevated: #121a30; --bg-sunken: #080c1a; --bg-overlay: rgba(4, 8, 20, 0.72); --line: #1e2a47; --line-soft: rgba(232, 237, 247, 0.06); --text: #e8edf7; --text-muted: #8a97b4; /* --- смысловые цвета --- Красный не значит «плохо»: расход — норма жизни. Красным подсвечивается только то, что требует внимания. */ --accent: #4d7cfe; --accent-strong: #6a92ff; --accent-soft: rgba(77, 124, 254, 0.16); --positive: #34d399; --positive-soft: rgba(52, 211, 153, 0.14); --negative: #fb7185; --negative-soft: rgba(251, 113, 133, 0.14); --warning: #fbbf24; --warning-soft: rgba(251, 191, 36, 0.14); /* Едва заметный градиент даёт карточке объём. Он именно для объёма, а не для украшения, поэтому такой слабый. */ --card-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0)); --page-glow: radial-gradient(120% 70% at 50% -10%, #182a5c 0%, rgba(11, 16, 32, 0) 62%); /* --- типографика --- */ --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --size-hero: clamp(34px, 11vw, 44px); --size-title: 28px; --size-section: 17px; --size-body: 16px; --size-amount: 17px; --size-caption: 13px; --size-label: 14px; /* --- форма --- */ --radius-card: 22px; --radius-control: 15px; --radius-pill: 999px; --tap: 48px; /* --- ритм --- */ --gap-xs: 6px; --gap-sm: 10px; --gap: 16px; --gap-lg: 22px; --gap-xl: 32px; --page-pad: 18px; --page-max: 640px; /* --- глубина --- */ --shadow-sheet: 0 -18px 50px rgba(2, 5, 15, 0.6); --shadow-raised: 0 10px 28px rgba(2, 5, 15, 0.45); /* --- движение --- */ --ease: cubic-bezier(0.22, 0.9, 0.32, 1); --fast: 150ms; --slow: 250ms; /* --- безопасные зоны iPhone --- */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); --tabbar-height: 62px; } /* Светлая тема. Переключателя пока нет — значения лежат наготове, чтобы он появился одним атрибутом на , а не переписыванием всех экранов. */ :root[data-theme="light"] { color-scheme: light; --bg-base: #f4f6fb; --bg-elevated: #ffffff; --bg-sunken: #eaeef7; --bg-overlay: rgba(24, 32, 52, 0.36); --line: #dde3f0; --line-soft: rgba(16, 24, 48, 0.06); --text: #101a30; --text-muted: #5b6780; --accent: #2f5fe0; --accent-strong: #1f4bc4; --accent-soft: rgba(47, 95, 224, 0.12); --positive: #0f9d68; --positive-soft: rgba(15, 157, 104, 0.12); --negative: #d94a63; --negative-soft: rgba(217, 74, 99, 0.12); --warning: #b57d05; --warning-soft: rgba(181, 125, 5, 0.14); --card-sheen: linear-gradient(180deg, rgba(16, 24, 48, 0.02), rgba(16, 24, 48, 0)); --page-glow: radial-gradient(120% 70% at 50% -10%, #e2e9fb 0%, rgba(244, 246, 251, 0) 62%); --shadow-sheet: 0 -18px 50px rgba(24, 32, 52, 0.18); --shadow-raised: 0 10px 28px rgba(24, 32, 52, 0.12); } /* Анимации — удобство, а не содержание: кому они мешают, тот их не увидит. */ @media (prefers-reduced-motion: reduce) { :root { --fast: 1ms; --slow: 1ms; } }