/* ============================================================================ SN games — дизайн-токены (единственный источник цветов/радиусов/теней). Тёмная тема — по умолчанию; светлая — через [data-theme="light"] на . Легаси-имена (--bg, --card, --line, --accent…) сохранены, чтобы мессенджер и настройки автоматически подхватили новую палитру. ========================================================================== */ :root{ /* --- шрифт ------------------------------------------------------------ */ --site-font:ui-rounded,"SF Pro Rounded","Aptos Rounded","Segoe UI Variable","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,sans-serif; --site-font-weight:560; --site-font-strong:760; /* --- палитра (dark) — Neutral Graphite --------------------------------- */ /* Почти монохромная оболочка: цвет дают медиа, аватары, сторис, обложки игр и профильные темы, а не сам интерфейс. Без золота/синего/teal. */ --bg:#050505; --bg-elev:#090909; /* топбар, сайдбар, нижняя навигация */ --panel:#0d0d0d; --card:#111111; --card-hover:#161616; --card-soft:#1b1b1b; /* вложенные поверхности внутри карточек */ --line:#242424; --line-soft:#1a1a1a; --text:#f2f2f2; --text-strong:#ffffff; --muted:#9a9a9a; --muted-2:#686868; /* Нейтральный акцент — светло-серый/белый, без цвета. */ --accent:#e8e8e8; --accent-hover:#ffffff; --accent-strong:#c7c7c7; --accent-soft:rgba(255,255,255,.08); --accent-soft-2:rgba(255,255,255,.14); --neutral-accent:#b6b6b6; --champagne:#c7c7c7; /* легаси-алиас: тоже нейтральный */ /* Текст/иконки поверх заливки цветом --accent (тёмный на светлом акценте) */ --on-accent:#0b0b0b; --success:#8f8f8f; /* «онлайн»/успех — нейтральный, не зелёный */ --success-soft:rgba(255,255,255,.08); --presence-online:#54c88a; /* единственное исключение: маленькая точка «в сети» */ --danger:#d96b6b; /* деструктив/ошибки — приглушённый, не rose */ --danger-soft:rgba(217,107,107,.14); --warn:#b6b6b6; /* предупреждения — нейтральный серый */ --warn-soft:rgba(255,255,255,.08); --bubble:#1b1b1b; /* легаси: пузыри сообщений */ /* --- геометрия ---------------------------------------------------------- */ --radius-xs:6px; --radius-sm:8px; --radius-md:10px; --radius-lg:12px; --radius-xl:16px; --radius-full:999px; /* --- тени ---------------------------------------------------------------- */ --shadow-sm:0 1px 2px rgba(0,0,0,.22); --shadow-md:0 8px 20px rgba(0,0,0,.26); --shadow-lg:0 18px 44px rgba(0,0,0,.38); --shadow-pop:0 18px 48px rgba(0,0,0,.46); /* --- движение ------------------------------------------------------------ */ --transition:all .18s cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.22,.61,.36,1); --ease-emph:cubic-bezier(.16,1,.3,1); --dur-fast:.14s; --dur-mid:.26s; --dur-slow:.45s; /* --- app shell ------------------------------------------------------------ */ --topbar-h:56px; --bottnav-h:56px; --sidebar-w:232px; --rail-w:300px; --shell-max:1240px; --shell-gap:20px; --content-max:640px; /* ширина колонки ленты */ --z-topbar:120; --z-dropdown:140; --z-sheet:160; --z-modal:180; --z-toast:200; color-scheme:dark; } /* ============================ светлая тема ============================== */ html[data-theme="light"]{ /* Gallery White — content-first светлая тема. Не инверсия dark и не SaaS dashboard: почти белый фон, тончайшие серые линии, графитовый акцент. Цвет дают фото/видео/аватары/обложки, а не интерфейс. */ --bg:#f8f8f8; --bg-elev:#ffffff; --panel:#ffffff; --card:#ffffff; --card-hover:#f3f3f3; --card-soft:#f1f1f1; --line:#dedede; --line-soft:#eeeeee; --text:#202020; --text-strong:#0b0b0b; --muted:#737373; --muted-2:#a6a6a6; /* Нейтральный акцент — чёрный/графит, без синего/teal/gold. */ --accent:#1d1d1d; --accent-hover:#000000; --accent-strong:#111111; --accent-soft:rgba(0,0,0,.06); --accent-soft-2:rgba(0,0,0,.10); --neutral-accent:#707070; --champagne:#111111; /* Текст/иконки поверх заливки --accent (светлый на тёмном акценте) */ --on-accent:#ffffff; --success:#707070; /* онлайн/успех — нейтральный графит */ --success-soft:rgba(0,0,0,.06); --presence-online:#2f9e5f; /* единственное исключение: маленькая точка «в сети» */ --danger:#c0392f; /* только ошибки/деструктив */ --danger-soft:rgba(192,57,47,.10); --warn:#707070; /* предупреждения — нейтральный серый */ --warn-soft:rgba(0,0,0,.06); --bubble:#f1f1f1; --shadow-sm:0 1px 2px rgba(20,24,35,.06); --shadow-md:0 8px 18px rgba(20,24,35,.08); --shadow-lg:0 18px 42px rgba(20,24,35,.10); --shadow-pop:0 16px 38px rgba(20,24,35,.14); color-scheme:light; }