:root { color-scheme: dark; --mobile-width: clamp(320px, 100vw, 540px); --page-max-width: 960px; --page-pad: 16px; --action-bar-height: 82px; --action-bar-gap: 10px; /* Semantic colors (theme-agnostic — same in dark / light) */ --c-danger: #e74c3c; --c-danger-soft: rgba(231, 76, 60, 0.15); --c-success: #2ecc71; --c-success-soft: rgba(46, 204, 113, 0.15); --c-warn: #f1c40f; --c-warn-soft: rgba(241, 196, 15, 0.12); --c-accent: #4ECDC4; --c-accent-soft: rgba(78, 205, 196, 0.12); --c-purple: #a78bfa; --c-blue: #60a5fa; /* ── Theme tokens (DARK = default) ───────────────────────────── Keep names neutral, value-equivalent to the existing dark palette so the rest of the codebase keeps rendering identically while we have it switchable. The light theme overrides these values via `html[data-theme="light"]` below. */ --bg-page: #050507; --bg-page-grad: radial-gradient(ellipse at 15% 10%, rgba(78, 205, 196, 0.04), transparent 40%), radial-gradient(ellipse at 85% 20%, rgba(108, 92, 231, 0.035), transparent 38%), radial-gradient(ellipse at 50% 80%, rgba(255, 200, 55, 0.02), transparent 40%), linear-gradient(160deg, #08090e 0%, #0a0a10 30%, #090910 60%, #07080c 100%); --text-1: #e8e8ec; --text-2: rgba(255, 255, 255, 0.75); --text-muted: rgba(255, 255, 255, 0.45); /* Бегущая строка */ --ticker-duration: 10s; --ticker-gap: 12px; /* Высота для мобилок */ --app-height: 100dvh; } /* ── LIGHT THEME ────────────────────────────────────────────────── Activated by setting `data-theme="light"` on . The actual per-component overrides live in `themes.css` (loaded last). This block only re-points the foundational tokens. */ html[data-theme="light"] { color-scheme: light; --bg-page: #f4f6fa; --bg-page-grad: radial-gradient(ellipse at 15% 10%, rgba(78, 205, 196, 0.10), transparent 45%), radial-gradient(ellipse at 85% 18%, rgba(167, 139, 250, 0.08), transparent 42%), radial-gradient(ellipse at 50% 85%, rgba(96, 165, 250, 0.06), transparent 45%), linear-gradient(160deg, #eef2f8 0%, #f4f6fa 30%, #f0f3f8 60%, #e9edf3 100%); --text-1: #1c1f24; --text-2: rgba(15, 18, 24, 0.78); --text-muted: rgba(15, 18, 24, 0.45); } *, *::before, *::after { box-sizing: border-box; } html { height: 100%; height: var(--app-height); background: var(--bg-page); touch-action: manipulation; -webkit-text-size-adjust: 100%; overflow: hidden; } body { position: fixed; inset: 0; width: 100%; height: 100%; height: var(--app-height); min-height: -webkit-fill-available; margin: 0; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; font-family: "Inter", system-ui, -apple-system, sans-serif; color: var(--text-1); overflow: hidden; } /* Static background */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--bg-page-grad); will-change: auto; } body.no-blur *, body.no-blur *::before, body.no-blur *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }