/* ================================================================= ЕДИНАЯ АРХИТЕКТУРА ТОКЕНОВ На два независимых атрибута: data-style ∈ {pro,glass,sgi} и data-theme ∈ {dark,light}. Шесть блоков ниже задают ОДИН и тот же набор имён переменных с разными значениями. Компонентный CSS ссылается ТОЛЬКО на токены и пишется один раз. Набор имён (единый для всех 6 комбинаций): --bg фон страницы --surface-1 базовая поверхность (сайдбар) --surface-2 карточки / контролы --surface-3 поверхность при наведении --surface-4 приподнятый слой (иконки hover) --text-1 / 2 / 3 основной / вторичный / приглушённый текст --hair / --hair-2 тонкие границы (обычная / усиленная) --accent единственный акцент комбинации --accent-ink текст на акцентном фоне (для нав. SGI) --accent-soft мягкая акцентная заливка --accent-line акцентная линия (фокус) --accent-glow свечение акцента --danger / -soft красный — только убытки/минус --ok / -soft зелёный — только плюс --muted нейтральный (нулевые значения) --bar «спокойный» столбец графика --bar-2 верх/градиент столбца --avatar-grad фон аватара --shadow-key близкая тень --shadow-ambient рассеянная тень --shadow-hover тень при наведении --radius-card / -ctrl / -chip радиусы ================================================================= */ /* ---------- PRO · DARK (≈ G1 «Графит Про», тёмная) ---------- */ html[data-style="pro"][data-theme="dark"]{ --bg:#0A0B0D; --surface-1:#131417; --surface-2:#17181B; --surface-3:#1D1E22; --surface-4:#232428; --text-1:rgba(255,255,255,0.95); --text-2:rgba(255,255,255,0.60); --text-3:rgba(255,255,255,0.40); --hair:rgba(255,255,255,0.07); --hair-2:rgba(255,255,255,0.11); --accent:#6AA0FF; --accent-ink:#FFFFFF; --accent-soft:rgba(106,160,255,0.14); --accent-line:rgba(106,160,255,0.30); --accent-glow:rgba(106,160,255,0.45); --danger:#FF6B6B; --danger-soft:rgba(255,107,107,0.12); --ok:#5FD3A0; --ok-soft:rgba(95,211,160,0.12); --muted:rgba(255,255,255,0.40); --bar:#4C6499; --bar-2:#5A75AE; --avatar-grad:linear-gradient(140deg,#2C2E34,#1A1B1F); --shadow-key:0 2px 6px -2px rgba(0,0,0,0.55); --shadow-ambient:0 24px 60px -28px rgba(0,0,0,0.65); --shadow-hover:0 32px 70px -30px rgba(0,0,0,0.8), 0 4px 10px -4px rgba(0,0,0,0.6); --radius-card:16px; --radius-ctrl:11px; --radius-chip:8px; --bell-bg:var(--accent); --bell-txt:transparent; } /* ---------- PRO · LIGHT (≈ G1 «Графит Про», светлая) ---------- */ html[data-style="pro"][data-theme="light"]{ --bg:#F6F6F8; --surface-1:#FFFFFF; --surface-2:#FFFFFF; --surface-3:#FBFBFC; --surface-4:#ECECEF; --text-1:#14151A; --text-2:rgba(20,21,26,0.60); --text-3:rgba(20,21,26,0.40); --hair:rgba(0,0,0,0.09); --hair-2:rgba(0,0,0,0.14); --accent:#3F7DF0; --accent-ink:#FFFFFF; --accent-soft:rgba(63,125,240,0.10); --accent-line:rgba(63,125,240,0.32); --accent-glow:rgba(63,125,240,0.28); --danger:#D6453F; --danger-soft:rgba(214,69,63,0.09); --ok:#1E9E6A; --ok-soft:rgba(30,158,106,0.10); --muted:rgba(20,21,26,0.40); --bar:#A9BEEA; --bar-2:#97AEE2; --avatar-grad:linear-gradient(140deg,#EDEFF4,#DCDEE6); --shadow-key:0 1px 3px -1px rgba(20,22,40,0.10); --shadow-ambient:0 18px 50px -26px rgba(20,22,40,0.18); --shadow-hover:0 26px 60px -28px rgba(20,22,40,0.22), 0 3px 8px -3px rgba(20,22,40,0.10); --radius-card:16px; --radius-ctrl:11px; --radius-chip:8px; --bell-bg:var(--accent); --bell-txt:transparent; } /* ---------- GLASS · DARK (≈ G2 «Графит Стекло», тёмная) ---------- */ html[data-style="glass"][data-theme="dark"]{ --bg:#08090B; --surface-1:rgba(22,24,28,0.55); --surface-2:rgba(22,24,28,0.55); --surface-3:rgba(42,46,52,0.70); --surface-4:rgba(52,57,64,0.80); --text-1:rgba(236,239,243,0.95); --text-2:rgba(236,239,243,0.60); --text-3:rgba(236,239,243,0.40); --hair:rgba(255,255,255,0.08); --hair-2:rgba(255,255,255,0.14); --accent:#7FB0FF; --accent-ink:#FFFFFF; --accent-soft:rgba(127,176,255,0.14); --accent-line:rgba(127,176,255,0.40); --accent-glow:rgba(127,176,255,0.55); --danger:#FF6B6B; --danger-soft:rgba(255,107,107,0.12); --ok:#59D69A; --ok-soft:rgba(89,214,154,0.12); --muted:rgba(236,239,243,0.40); --bar:rgba(120,130,148,0.30); --bar-2:#9CC3FF; --avatar-grad:linear-gradient(150deg,rgba(42,46,52,0.70),rgba(52,57,64,0.80)); --shadow-key:0 2px 8px -2px rgba(0,0,0,0.55); --shadow-ambient:0 24px 60px -20px rgba(0,0,0,0.65); --shadow-hover:0 24px 60px -20px rgba(0,0,0,0.65), 0 4px 14px -4px rgba(0,0,0,0.5); --radius-card:16px; --radius-ctrl:11px; --radius-chip:8px; /* стекло-специфичные */ --glass-bg:rgba(22,24,28,0.55); --glass-edge:rgba(255,255,255,0.10); --glass-blur:blur(18px) saturate(1.1); --bar-top:#9CC3FF; --bar-bot:#5C86C7; --radial-1:#0E1014; --radial-2:rgba(127,176,255,0.05); --bell-bg:var(--danger); --bell-txt:#fff; } /* ---------- GLASS · LIGHT (≈ G2 «Графит Стекло», светлая) ---------- */ html[data-style="glass"][data-theme="light"]{ --bg:#F4F6F9; --surface-1:rgba(255,255,255,0.70); --surface-2:rgba(255,255,255,0.70); --surface-3:rgba(244,247,250,0.92); --surface-4:rgba(255,255,255,0.95); --text-1:rgba(24,28,34,0.95); --text-2:rgba(24,28,34,0.58); --text-3:rgba(24,28,34,0.40); --hair:rgba(20,28,40,0.09); --hair-2:rgba(20,28,40,0.15); --accent:#4D86E6; --accent-ink:#FFFFFF; --accent-soft:rgba(77,134,230,0.12); --accent-line:rgba(77,134,230,0.40); --accent-glow:rgba(77,134,230,0.30); --danger:#E0524F; --danger-soft:rgba(224,82,79,0.10); --ok:#2E9E73; --ok-soft:rgba(46,158,115,0.10); --muted:rgba(24,28,34,0.40); --bar:rgba(120,140,170,0.28); --bar-2:#6F9BF0; --avatar-grad:linear-gradient(150deg,rgba(244,247,250,0.92),rgba(255,255,255,0.95)); --shadow-key:0 1px 4px -1px rgba(40,54,80,0.16); --shadow-ambient:0 20px 44px -22px rgba(40,54,80,0.28); --shadow-hover:0 20px 44px -22px rgba(40,54,80,0.28), 0 3px 10px -4px rgba(40,54,80,0.16); --radius-card:16px; --radius-ctrl:11px; --radius-chip:8px; --glass-bg:rgba(255,255,255,0.70); --glass-edge:rgba(255,255,255,0.85); --glass-blur:blur(18px) saturate(1.1); --bar-top:#6F9BF0; --bar-bot:#3E72D4; --radial-1:#FFFFFF; --radial-2:rgba(77,134,230,0.05); --bell-bg:var(--danger); --bell-txt:#fff; } /* ---------- SGI · DARK (≈ S-sgipro «SGI Pro», тёмная) ---------- */ html[data-style="sgi"][data-theme="dark"]{ --bg:#191A1C; --surface-1:#212327; --surface-2:#212327; --surface-3:#282A2F; --surface-4:#282A2F; --text-1:#F6F7F9; --text-2:#BBC0C7; --text-3:#888D95; --hair:#33363B; --hair-2:#43474E; --accent:#41B7BF; --accent-ink:#93E2E7; --accent-soft:#16302F; --accent-line:#41B7BF; --accent-glow:rgba(65,183,191,0.40); --danger:#E1736A; --danger-soft:#2E1D1A; --ok:#5FB985; --ok-soft:#1B2620; --muted:#888D95; --bar:#41B7BF; --bar-2:#64CDD4; --avatar-grad:#16302F; --shadow-key:0 1px 2px rgba(0,0,0,.32); --shadow-ambient:0 10px 28px rgba(0,0,0,.42); --shadow-hover:0 2px 6px rgba(0,0,0,.42), 0 20px 46px rgba(0,0,0,.55); --radius-card:14px; --radius-ctrl:10px; --radius-chip:999px; --accent-strong:#64CDD4; --surface-head:#282A2F; --border-strong:#43474E; --bell-bg:var(--danger); --bell-txt:#fff; } /* ---------- SGI · LIGHT (≈ S-sgipro «SGI Pro», светлая) ---------- */ html[data-style="sgi"][data-theme="light"]{ --bg:#F1F4F4; --surface-1:#FFFFFF; --surface-2:#FFFFFF; --surface-3:#F8FAFA; --surface-4:#F8FAFA; --text-1:#15201F; --text-2:#5B6A68; --text-3:#8B9896; --hair:#E2E7E7; --hair-2:#D2D9D9; --accent:#0E6E76; --accent-ink:#0A565C; --accent-soft:#E0EEEF; --accent-line:#0E6E76; --accent-glow:rgba(14,110,118,0.22); --danger:#AB4339; --danger-soft:#F7E6E3; --ok:#3E7D5C; --ok-soft:#E7F1EB; --muted:#8B9896; --bar:#0E6E76; --bar-2:#0A565C; --avatar-grad:#E0EEEF; --shadow-key:0 1px 2px rgba(20,40,38,.04); --shadow-ambient:0 6px 20px rgba(20,40,38,.05); --shadow-hover:0 2px 4px rgba(20,40,38,.05), 0 14px 36px rgba(20,40,38,.10); --radius-card:14px; --radius-ctrl:10px; --radius-chip:999px; --accent-strong:#0A565C; --surface-head:#F8FAFA; --border-strong:#D2D9D9; --bell-bg:var(--danger); --bell-txt:#fff; } /* ================================================================= НЕПРОЗРАЧНАЯ ПОДЛОЖКА ЗАКРЕПЛЁННОГО ПЕРВОГО СТОЛБЦА (--col-stick) В «стекле» --surface-2 полупрозрачный, поэтому для липкого столбца задаём отдельный СОЛИДНЫЙ цвет, чтобы при горизонтальной прокрутке под ним не просвечивали ни фон, ни соседние колонки. ================================================================= */ html[data-style="glass"][data-theme="dark"] thead th:first-child, html[data-style="glass"][data-theme="dark"] tbody td:first-child{--col-stick:#181A1E} html[data-style="glass"][data-theme="light"] thead th:first-child, html[data-style="glass"][data-theme="light"] tbody td:first-child{--col-stick:#F7F9FB}