/* Ф5.1 — тема сайта CSS-ТОКЕНАМИ (П4-требования §2): custom properties поверх контрактных * cxm-*/site-* классов. Страница может переопределить любой токен своим :root-блоком * (public.html задаёт свой --s-bg) — «кабинет переопределяет». Тёмный пресет — * [data-theme="dark"] на (переключатель: dev/theme.mjs, хранение localStorage; * хранение темы как ПОЛЬЗОВАТЕЛЬСКИХ данных (Resource rKind="theme") — закладка §4, потом). */ :root { --s-bg: #f6f6f4; /* фон страницы */ --s-fg: #222; /* основной текст */ --s-muted: #78808f; /* метаданные: время, счётчики */ --s-card: #ffffff; /* поверхности: секции, редактор */ --s-border: #e2e2de; /* рамки поверхностей */ --s-line: #ddd; /* разделители строк списков */ --s-danger: #a55; /* баннеры ошибок, статусы */ --s-note: #567; /* служебные подписи */ --s-teaser: #a86; /* locked-тизеры */ --s-code-bg: #f0f0ec; /* фон инлайн-кода */ --s-pick: #dde8f8; /* выбранное (слоты, бейджи-состояния) */ --s-accent: #4a6fa5; /* акцент (кнопки-ссылки, рамка скина) */ } [data-theme="dark"] { --s-bg: #1d1f24; --s-fg: #e8e6e1; --s-muted: #98a0ad; --s-card: #262931; --s-border: #3a3e48; --s-line: #383c45; --s-danger: #d98c8c; --s-note: #9ab0c4; --s-teaser: #c9a06a; --s-code-bg: #31353f; --s-pick: #31415c; --s-accent: #7d9fd4; } body { background: var(--s-bg); color: var(--s-fg); } a { color: var(--s-accent); } /* бейджи знаний/состояний (Ф5-хвост: были пастель-хардкодом в index.html) */ :root { --s-badge: #eee; --s-badge-bd: #ccc; --s-badge-fact: #dcefdc; --s-badge-hyp: #fdf3d7; --s-badge-state: #dde8f8; --s-badge-trait:#f0dff2; --s-badge-met: #dcefdc; --s-badge-unmet: #f6d9d5; --s-badge-ok: #cfe8cf; --s-ws-bd: #b9c6e0; --s-ws-bg: #f4f7fd; } [data-theme="dark"] { --s-badge: #3a3e48; --s-badge-bd: #4a4f5c; --s-badge-fact: #2e4630; --s-badge-hyp: #4a4126; --s-badge-state: #2c3c55; --s-badge-trait:#42304a; --s-badge-met: #2e4630; --s-badge-unmet: #4d2f2c; --s-badge-ok: #2f4a30; --s-ws-bd: #3d4c66; --s-ws-bg: #242c3a; }