/* ─── Тёмная тема (html[data-theme=dark], js/theme.js) ───
Аддитивный скин: (1) переопределение дизайн-токенов, (2) точечные оверрайды
мест с захардкоженной «белой бумагой» (#fff/#FFFDF6) и белым текстом на
графите (графит в темноте светлеет — текст обязан темнеть), (3) флипы
инлайновых SVG-штрихов чернильного цвета. Карандашные подложки sk-tabbar
красит ночной маппинг в самом barSVG (web/sk-tabbar.js), не CSS. */
:root[data-theme="dark"]{
--paper:#211E1A;
--paper2:#2A2722;
--paper-dot:rgba(232,226,210,.055);
--graphite:#E8E2D2;
--graphite-soft:#C4BDAE;
--pencil:#948E80;
--pencil-faint:#4A463E;
--ink-blue:#7C9BE3;
--red:#E06A55;
--green:#5FAE7C;
--green-soft:rgba(95,174,124,.14);
--violet:#AC77D6;
--amber:#E2AC4C;
--teal:#4AA8A8;
--marker:rgba(255,222,89,.20);
--strike:rgba(224,106,85,.6);
--shadow:3px 4px 0 rgba(0,0,0,.4);
/* тёмная поверхность для мест с background:#fff (карточки, попы, инпуты) */
--card:#2A2722;
color-scheme:dark;
}
/* Дока-остров (.sk-dock-plate::before) и его растворяющийся верх в dark-override
НЕ нуждаются: это gradient-MASK (режет альфу поверх --paper), а не
захардкоженный светлый градиент — тёмный paper приходит из токенов сам.
Прежние светлые overrides (.sk-dock-fade / ::after) убраны: .sk-dock-fade
скрыт (верх растворяет сама плашка), ::after заменён крест-маской. */
/* карандаш «думания» (data-URL хардкодит светлый графит #55514A) — в ночь светлеет */
:root[data-theme="dark"] .cp-thkpen{
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20l2.5-7L17 2.5l4.5 4.5L11 17.5 4 20z' fill='none' stroke='%23C4BDAE' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/24px no-repeat;
}
/* карточки проверки диктовки (лист 17): в ночь — тёмная поверхность, иначе
светлый paper2 + светлый текст-графит = невидимое название задачи */
:root[data-theme="dark"] .t17,
:root[data-theme="dark"] .sl17{ background:var(--card); }
/* пейвол (лист 11): шит/строки/буллеты — тёмная поверхность; радио и белые
подложки — --card; gold-кнопка остаётся gold (единственный акцент), но
текст на ней тёмный не нужен — контраст к #fff достаточен */
:root[data-theme="dark"] .pw-sheet,
:root[data-theme="dark"] .pw-plan,
:root[data-theme="dark"] .pw-mrow,
:root[data-theme="dark"] .pw-blts,
:root[data-theme="dark"] .pw-x,
:root[data-theme="dark"] .pw-cur,
:root[data-theme="dark"] .pw-fail .st,
:root[data-theme="dark"] .pw-promo input{ background:var(--card); }
:root[data-theme="dark"] .pw-rad{ background:var(--card); }
:root[data-theme="dark"] .pw-plan.sel,
:root[data-theme="dark"] .pw-mrow.sel{ background:var(--marker); }
/* ── поверхности: всё, что было «белой карточкой», теперь --card ── */
:root[data-theme="dark"] .drop-bubble,
:root[data-theme="dark"] .ts-task,
:root[data-theme="dark"] input.ti,
:root[data-theme="dark"] dialog input,
:root[data-theme="dark"] dialog select,
:root[data-theme="dark"] dialog textarea,
:root[data-theme="dark"] #login-dev input,
:root[data-theme="dark"] #login-email input,
:root[data-theme="dark"] .assignee-chip,
:root[data-theme="dark"] .cbubble,
:root[data-theme="dark"] .tg-chat,
:root[data-theme="dark"] .archive-tag-input,
:root[data-theme="dark"] .yrow,
:root[data-theme="dark"] .mon,
:root[data-theme="dark"] .mon .mini,
:root[data-theme="dark"] .tag,
:root[data-theme="dark"] .c-input input,
:root[data-theme="dark"] .trow,
:root[data-theme="dark"] .mascot .bubble,
:root[data-theme="dark"] .mascot .bubble::after,
:root[data-theme="dark"] .asst-msg.bot,
:root[data-theme="dark"] .as-chip,
:root[data-theme="dark"] .check .box,
:root[data-theme="dark"] .pill,
:root[data-theme="dark"] .note,
:root[data-theme="dark"] .sn-item,
:root[data-theme="dark"] .ctx,
:root[data-theme="dark"] .tm-chip,
:root[data-theme="dark"] .tm-chip.add:hover,
:root[data-theme="dark"] .tm-pop,
:root[data-theme="dark"] .tm-mini,
:root[data-theme="dark"] .tm-seg button,
:root[data-theme="dark"] .tm-dice,
:root[data-theme="dark"] .tm-flyer,
:root[data-theme="dark"] .tm-card,
:root[data-theme="dark"] .cl-check,
:root[data-theme="dark"] .cl-item .qty button,
:root[data-theme="dark"] .lchip,
:root[data-theme="dark"] .timg-w .rm,
:root[data-theme="dark"] .mp-row,
:root[data-theme="dark"] .sort-open,
:root[data-theme="dark"] .sx-card,
:root[data-theme="dark"] .sx-card .stamp,
:root[data-theme="dark"] .sx-l2c,
:root[data-theme="dark"] .sxb,
:root[data-theme="dark"] .sx-sum,
:root[data-theme="dark"] .ib-text,
:root[data-theme="dark"] .ib-b,
:root[data-theme="dark"] .ob-dot,
:root[data-theme="dark"] .ob-hpill,
:root[data-theme="dark"] .ob-rom,
:root[data-theme="dark"] .ob-dlg,
:root[data-theme="dark"] .ob-tip,
:root[data-theme="dark"] .shead .cnt,
:root[data-theme="dark"] #profile .who-meta .plan,
:root[data-theme="dark"] .rpg-pop{
background-color:var(--card);
}
/* нюдж-пузырь маскота и подсказка ассистента: тёплый крем → тёмный янтарь */
:root[data-theme="dark"] .mascot.has-nudge .bubble,
:root[data-theme="dark"] .asst-hint{background-color:#332B1C;}
:root[data-theme="dark"] .it:hover{background-color:#32302A;}
/* «Шкаф»: карточки на своей переменной (shelf.css, :root) — гасим её целиком */
:root[data-theme="dark"]{--sh-card:var(--card);}
/* Ящичек: крафт коробки красит ночной маппинг в barSVG, а плоскую заливку
строк-бумажек (своя переменная, tasks.css) гасим здесь */
:root[data-theme="dark"] .task.in-box{--box-scrap:#332F29;}
/* ── белый текст на графите: графит стал светлым — текст темнеет ── */
:root[data-theme="dark"] .btn.primary,
:root[data-theme="dark"] .tag.active,
:root[data-theme="dark"] .sortbtn.active,
:root[data-theme="dark"] .assignee-chip.selected,
:root[data-theme="dark"] .rpg-rib.legend,
:root[data-theme="dark"] #login-dev button{color:#211E1A;}
/* ── чернильные штрихи инлайновых SVG (маскот, карандашик, чек-иконки):
flip только рисованного «инка»; подложки sk-tabbar (.sk-tabbar-bg) не
трогаем — их красит ночной маппинг в barSVG ── */
:root[data-theme="dark"] :not(.sk-tabbar-bg) > svg [stroke="#2C2A26"]{stroke:var(--graphite);}
:root[data-theme="dark"] :not(.sk-tabbar-bg) > svg [fill="#2C2A26"]{fill:var(--graphite);}
:root[data-theme="dark"] :not(.sk-tabbar-bg) > svg [stroke="#8B8578"]{stroke:var(--pencil);}
/* тот же «инк», но хексом дизайн-кита глифов (#2E2A26): статические иконки
таб-бара (SK_TAB_ICONS) и профиля рисуются строками мимо barSVG — DARKMAP
их не видит, без флипа активная вкладка в ночи — слепая тёмная плашка */
:root[data-theme="dark"] :not(.sk-tabbar-bg) > svg [stroke="#2E2A26"]{stroke:var(--graphite);}
:root[data-theme="dark"] :not(.sk-tabbar-bg) > svg [fill="#2E2A26"]{fill:var(--graphite);}
/* бумажная заливка глифов таб-бара — в card (вырезы галки и т.п.) */
:root[data-theme="dark"] .sk-tab svg [fill="#FFFDF6"]{fill:#2A2722;}
/* Карандашик-маскот — палитра прототипа skrabl-mascot v6 (THEMES.dark):
контур/руки светлеют общим флипом #2C2A26 выше, а ЛИЦО остаётся тёмным на
жёлтом теле (иначе глаза-рот «привидением» тонут); грифель — графит 57504A,
феррула и деревяшка чуть приглушены. Классы mf-… и mg — на всех копиях
карандаша в index.html. (Не писать «звёздочка-слэш» в тексте комментария —
парсер закрывает его досрочно и съедает следующее правило.) */
:root[data-theme="dark"] :not(.sk-tabbar-bg) > svg .mf-f{fill:#2E2B27;}
:root[data-theme="dark"] :not(.sk-tabbar-bg) > svg .mf-s{stroke:#2E2B27;}
:root[data-theme="dark"] :not(.sk-tabbar-bg) > svg .mg{fill:#57504A;}
:root[data-theme="dark"] .pencil-btn svg [fill="#C9C3B4"]{fill:#B9B2A2;}
:root[data-theme="dark"] .pencil-btn svg [fill="#EBD8B0"]{fill:#E4D2A8;}
/* грифель прогресс-полосок профиля (boot.js drawProfileBars, фон-дорожка) */
:root[data-theme="dark"] [data-bar-fill] svg [fill="#D8D0C2"]{fill:#4A463E;}
/* белый 6-слойный ореол читаемости у текста пилюль (components.css .pill .label
— отделяет текст от штриховки) в ночи светится грязным блюром на тёмной
карточке; тот же ореол, но в тон поверхности пилюли (--card) */
:root[data-theme="dark"] .pill .label{
text-shadow:0 0 2px var(--card),0 0 3px var(--card),0 0 4px var(--card),
0 0 6px var(--card),0 0 8px var(--card),0 0 10px var(--card);
}
/* .frame (полосы «Сегодня/Неделя/Месяц» на календаре, components.css) — в лайте
это осветляющая белая плёнка rgba(255,255,255,.55); в ночи она даёт серую
плиту, на которой светлые подписи тонут. Тот же приём «приподнятой бумаги»,
но едва заметным светлым слоем. */
:root[data-theme="dark"] .frame{background:rgba(232,226,210,.07);}
/* ── разное ── */
:root[data-theme="dark"] dialog::backdrop{background:rgba(0,0,0,.55);}
:root[data-theme="dark"] .skm-frame{box-shadow:0 -8px 30px rgba(0,0,0,.5);}
/* фото-виджеты/аватарки: чуть притушить, чтобы не бликовали на тёмном */
:root[data-theme="dark"] img.ava{filter:brightness(.92);}
/* нижний лист и белые «дырки» онбординга — на тёмную бумагу */
:root[data-theme="dark"] .ob-slides{background:var(--paper);}
/* сегмент темы в профиле: активная пилюля светит янтарём (как fchip.on) */
#theme-seg{display:flex; gap:8px; flex-wrap:wrap; margin-top:6px;}
#theme-seg button{
position:relative; display:inline-flex; align-items:center; gap:6px;
padding:7px 14px; min-height:40px; font-family:inherit; font-size:.95rem;
color:var(--graphite-soft); background:none; border:none; cursor:pointer;
}
#theme-seg button.on{color:var(--graphite);}
#theme-seg button > *{position:relative;}
/* Тумблер desktop-уведомлений (профиль) — та же сегмент-идиома, что у темы. */
#push-seg{display:flex; gap:8px; flex-wrap:wrap; margin-top:6px;}
#push-seg button{
position:relative; display:inline-flex; align-items:center; gap:6px;
padding:7px 14px; min-height:40px; font-family:inherit; font-size:.95rem;
color:var(--graphite-soft); background:none; border:none; cursor:pointer;
}
#push-seg button.on{color:var(--graphite);}
#push-seg button > *{position:relative;}