/* ============================================================ dc-tokens.css — единые токены дизайн-системы clike.ru (эталон) Источник истины: mock/admin-buttons-canon.html (утверждён 2026-07-05). ТОЛЬКО переменные. Компоненты (кнопки/бейджи/таблицы) — отдельно, при раскатке. Тема флипается по [data-theme] на . Дефолт — тёмная. Исключения (НЕ трогаем, всегда тёмные): лента / общий чат / сообщения. ============================================================ */ :root{ /* ── геометрия кнопки (одна на все) ── */ --btn-h: 28px; --btn-font: 11px; --btn-weight: 480; --btn-pad-x: 10px; --btn-radius: 999px; --btn-gap: 4px; --btn-icon: 20px; /* ── бренд ── */ --brand-1:#e8651c; --brand-2:#f5872e; /* ── радиусы ── */ --r-8:8px; --r-10:10px; --r-12:12px; --r-16:16px; --r-pill:999px; /* ── отступы (шкала) ── */ --s-2:2px; --s-4:4px; --s-6:6px; --s-8:8px; --s-10:10px; --s-12:12px; --s-16:16px; --s-20:20px; --s-24:24px; /* ── движение ── */ --dur-fast:.12s; --dur:.15s; --ease:cubic-bezier(.4,0,.2,1); /* ── фокус-кольцо (клавиатура) ── */ --focus-ring:0 0 0 2px rgba(255,133,0,.45); /* ── иконки ── */ --icon-stroke:1.9; /* ── z-слои ── */ --z-base:1; --z-dropdown:100; --z-sidebar:280; --z-header:300; --z-drawer:400; --z-scrim:450; --z-modal:500; --z-toast:600; --z-tooltip:700; /* ── семантика (одинаково в обеих темах) ── */ --ok:#2fd07a; --warn:#f5c518; --err:#ff3333; --info:#6aa8ff; --ok-bg:rgba(47,208,122,.12); --ok-bd:rgba(47,208,122,.32); --warn-bg:rgba(245,197,24,.12); --warn-bd:rgba(245,197,24,.32); --err-bg:rgba(255,51,51,.12); --err-bd:rgba(255,51,51,.40); --info-bg:rgba(74,150,255,.12); --info-bd:rgba(74,150,255,.32); /* ── шрифт интерфейса ── */ --ui-font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif; /* ── типографика (размеры/веса) ── */ --t-h1: 20px; --t-h1-w: 640; --t-h2: 16px; --t-h2-w: 560; --t-h3: 14px; --t-h3-w: 560; --t-body: 12px; --t-body-w: 400; --t-small: 11px; --t-small-w: 400; --t-cap: 10.5px; --t-cap-w: 560; --t-num-l: 26px; --t-num-m: 16px; --t-num-s: 12px; /* ── поля ввода ── */ --input-h: 36px; --input-radius: 999px; --input-radius-area: 16px; --input-font: 13px; } /* ================= ТЁМНАЯ ТЕМА (дефолт) ================= */ :root, :root[data-theme="dark"]{ --bg: #08080a; --bg-radial: rgba(255,255,255,.04); --panel: #141416; /* карточки = чёрно-серый градиент шапки сайта (dc-app-header) */ --panel-grad: radial-gradient(circle at 12% 0%, rgba(255,255,255,.06), transparent 42%), linear-gradient(180deg,#1a1a1e,#0b0b0d); --panel-bd: rgba(255,255,255,.10); --panel-soft: rgba(255,255,255,.03); --ink: #e6eaf0; --muted: #8b97a9; --btn-bg: rgba(255,255,255,.04); --btn-fg: rgba(255,255,255,.62); --btn-bd: rgba(255,255,255,.10); --btn-bg-hover: rgba(255,255,255,.08); --btn-fg-hover: #fff; --btn-bd-hover: rgba(255,255,255,.18); --btn-bg-active: rgba(255,133,0,.10); --btn-fg-active: rgb(255,232,200); --btn-bd-active: rgba(255,178,26,.42); --ico-bg: rgba(255,255,255,.05); --ico-bd: rgba(255,255,255,.10); --seg-bg: rgba(255,255,255,.03); --seg-bd: rgba(255,255,255,.08); --link: #f5872e; --link-hover: #ffb46a; --danger-fg: #ff4d4d; --danger-bd: rgba(255,51,51,.5); --danger-bg: rgba(255,60,60,.10); /* primary CTA текст */ --primary-ink: #fff; } /* ================= СВЕТЛАЯ ТЕМА ================= */ :root[data-theme="light"]{ --bg: #eef0f4; --bg-radial: rgba(16,22,32,.03); --panel: #ffffff; --panel-grad: #ffffff; --panel-bd: rgba(16,22,32,.09); --panel-soft: rgba(16,22,32,.02); --ink: #12161c; --muted: #5c6675; --btn-bg: rgba(16,22,32,.04); --btn-fg: #4a5566; --btn-bd: rgba(16,22,32,.12); --btn-bg-hover: rgba(16,22,32,.07); --btn-fg-hover: #12161c; --btn-bd-hover: rgba(16,22,32,.22); --btn-bg-active: rgba(255,133,0,.12); --btn-fg-active: #b4560c; --btn-bd-active: rgba(232,101,28,.45); --ico-bg: rgba(16,22,32,.05); --ico-bd: rgba(16,22,32,.10); --seg-bg: rgba(16,22,32,.04); --seg-bd: rgba(16,22,32,.10); --link: #d2560f; --link-hover: #b4560c; --danger-fg: #d23f3f; --danger-bd: rgba(210,63,63,.40); --danger-bg: rgba(210,63,63,.08); /* primary CTA текст (тёмный, иначе сливается) */ --primary-ink: #1c1206; }