/* ============================================================================ ds-theme.css — ЕДИНАЯ система тем дизайн-системы Clike. Один источник: :root = ТЁМНАЯ (дефолт). [data-theme="light"] переопределяет ТОЛЬКО изменяемые токены (не копия!). Два параллельных файла dark/light — запрещены. Тема флипается по [data-theme] на (кука dc_theme у гостя / web_accounts.theme у юзера). Исключения (всегда тёмные): лента / общий чат / ЛС — управляются на уровне data-theme. ССЫЛКИ: --ds-link = СИНИЙ (@username, обычные ссылки); --ds-link-brand = ОРАНЖ (бренд-CTA). ============================================================================ */ :root, :root[data-theme="dark"]{ /* поверхности */ --ds-bg:#08080a; --ds-bg-navy:#0b1119; /* вторая тёмная база (auth/акции) */ --ds-bg-radial:rgba(255,255,255,.04); --ds-panel:#141416; --ds-panel-2:#1c1d21; /* приподнятая поверхность (карточка-2) */ --ds-panel-3:#232428; /* ещё выше (карточка-3) */ --ds-panel-grad:radial-gradient(circle at 12% 0%, rgba(255,255,255,.06), transparent 42%), linear-gradient(180deg,#1a1a1e,#0b0b0d); --ds-panel-bd:rgba(255,255,255,.10); --ds-panel-soft:rgba(255,255,255,.03); /* текст */ --ds-ink:#e6eaf0; --ds-muted:#8b97a9; --ds-muted-2:#5c6675; /* приглушённее muted */ /* кнопки (тема-зависимые) */ --ds-btn-bg:rgba(255,255,255,.04); --ds-btn-fg:rgba(255,255,255,.62); --ds-btn-bd:rgba(255,255,255,.10); --ds-btn-bg-hover:rgba(255,255,255,.08); --ds-btn-fg-hover:#fff; --ds-btn-bd-hover:rgba(255,255,255,.18); --ds-btn-bg-active:rgba(255,133,0,.10); --ds-btn-fg-active:rgb(255,232,200); --ds-btn-bd-active:rgba(255,178,26,.42); --ds-ico-bg:rgba(255,255,255,.05); --ds-ico-bd:rgba(255,255,255,.10); --ds-seg-bg:rgba(255,255,255,.03); --ds-seg-bd:rgba(255,255,255,.08); /* ссылки */ --ds-link:#3390ec; /* синий — @username и обычные ссылки */ --ds-link-hover:#5aa9f0; --ds-link-brand:#f5872e; /* оранж — только бренд-CTA */ --ds-link-brand-hover:#ffb46a; /* danger */ --ds-danger-fg:#ff4d4d; --ds-danger-bd:rgba(255,51,51,.5); --ds-danger-bg:rgba(255,60,60,.10); /* прочее */ --ds-primary-ink:#fff; /* текст на primary-кнопке */ --ds-scrim:rgba(0,0,0,.35); /* затемнение под модалками (= medium) */ --ds-scrim-strong:rgba(0,0,0,.5); /* = strong */ /* scrim-шкала (одинакова в обеих темах, не дублирует существующие two): weak .2 · medium = --ds-scrim (.35) · strong = --ds-scrim-strong (.5) · stronger .7 */ --ds-scrim-weak:rgba(0,0,0,.2); --ds-scrim-stronger:rgba(0,0,0,.7); /* ── Тени (тема-зависимые) — канон §19 эталона-дизайна: 1 карточка · 2 поповер/меню · 3 тост ── */ --ds-shadow-1:0 4px 16px rgba(0,0,0,.18); --ds-shadow-2:0 12px 32px rgba(0,0,0,.28); --ds-shadow-3:0 10px 30px rgba(0,0,0,.35); } :root[data-theme="light"]{ --ds-bg:#eef0f4; --ds-bg-navy:#eef0f4; /* в светлой navy отсутствует → обычный холст */ --ds-bg-radial:rgba(16,22,32,.03); --ds-panel:#ffffff; --ds-panel-2:#f2f5f9; --ds-panel-3:#e7ebf1; --ds-panel-grad:#ffffff; --ds-panel-bd:rgba(16,22,32,.09); --ds-panel-soft:rgba(16,22,32,.02); --ds-ink:#12161c; --ds-muted:#5c6675; --ds-muted-2:#98a1ae; --ds-btn-bg:rgba(16,22,32,.04); --ds-btn-fg:#4a5566; --ds-btn-bd:rgba(16,22,32,.12); --ds-btn-bg-hover:rgba(16,22,32,.07); --ds-btn-fg-hover:#12161c; --ds-btn-bd-hover:rgba(16,22,32,.22); --ds-btn-bg-active:rgba(255,133,0,.12); --ds-btn-fg-active:#b4560c; --ds-btn-bd-active:rgba(232,101,28,.45); --ds-ico-bg:rgba(16,22,32,.05); --ds-ico-bd:rgba(16,22,32,.10); --ds-seg-bg:rgba(16,22,32,.04); --ds-seg-bd:rgba(16,22,32,.10); --ds-link:#2b7fd4; /* синий (светлая) */ --ds-link-hover:#1f6ec2; --ds-link-brand:#d2560f; /* оранж (светлая) */ --ds-link-brand-hover:#b4560c; --ds-danger-fg:#d23f3f; --ds-danger-bd:rgba(210,63,63,.40); --ds-danger-bg:rgba(210,63,63,.08); --ds-primary-ink:#1c1206; /* scrim одинаков в обеих темах — не переопределяем (weak/medium/strong/stronger наследуются) */ /* тени в light — слабее и светлее: нейтрально-синяя база под светлые панели, ниже opacity */ --ds-shadow-1:0 4px 16px rgba(16,22,32,.08); --ds-shadow-2:0 12px 32px rgba(16,22,32,.12); --ds-shadow-3:0 10px 30px rgba(16,22,32,.16); }