/* ============================================================================ Палитра и токены темы. Все цвета заданы триплетами RGB, а не готовыми цветами. Это даёт две вещи: один и тот же токен годится и для сплошной заливки `rgb(var(--surface))`, и для полупрозрачной `rgb(var(--surface) / .84)`; и переключение темы меняет ровно один блок переменных, а не весь стиль. Фирменный красный TexnoGrand сохранён. В тёмной теме он осветлён: исходный #E31E24 на чёрном фоне даёт недостаточный контраст и «звенит». ========================================================================= */ :root { /* поверхности */ --bg: 244 246 248; --surface: 255 255 255; --surface-2: 247 249 250; --surface-3: 239 242 245; --raised: 241 244 246; /* линии */ --line: 229 232 236; --line-strong: 206 213 221; /* текст */ --fg: 20 24 31; --fg-2: 58 67 81; --muted: 107 118 132; /* фирменный */ --brand: 227 30 36; --brand-dark: 176 18 26; --brand-ink: 122 15 20; --brand-soft: 253 236 236; --brand-light: 240 138 142; --brand-fg: 255 255 255; /* состояния */ --ok: 22 163 74; --ok-soft: 220 252 231; --ok-ink: 22 101 52; --warn: 217 119 6; --warn-soft: 255 247 237; --warn-line: 254 215 170; --warn-ink: 154 52 18; --danger: 220 38 38; --danger-soft: 254 226 226; --danger-line: 254 202 202; --danger-ink: 153 27 27; --info: 37 99 235; --info-soft: 224 231 255; --info-ink: 30 64 175; /* Тёмная плашка. Часть блоков задумана как тёмная на светлой странице: приветственные шапки разделов, чёрные кнопки, кружки аватаров. Их нельзя красить обычными токенами — те переворачиваются вместе с темой, и блок из тёмного становится светлым, а белый текст на нём пропадает. Эта пара остаётся тёмной с светлым текстом в обеих темах. */ --ink: 15 23 42; --ink-fg: 255 255 255; /* тень */ --shadow: 15 23 42; /* производные */ --shadow-sm: 0 1px 2px rgb(var(--shadow) / .05); --shadow-md: 0 1px 2px rgb(var(--shadow) / .05), 0 10px 26px -14px rgb(var(--shadow) / .28); --shadow-lg: 0 2px 6px rgb(var(--shadow) / .07), 0 22px 48px -24px rgb(var(--shadow) / .40); --radius-sm: 10px; --radius: 14px; --radius-lg: 20px; --sidebar-w: 264px; --topbar-h: 60px; --ease: cubic-bezier(.22, 1, .36, 1); color-scheme: light; } /* Тёмная тема. Три состояния вместо двух: явный выбор ставит data-theme на , а режим «как в системе» не ставит ничего — там решает prefers-color-scheme. Поэтому правило системной темы закрыто от явного выбора светлой. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: 11 14 19; --surface: 20 25 34; --surface-2: 27 32 41; --surface-3: 33 39 50; --raised: 33 39 50; --line: 42 49 61; --line-strong: 58 67 82; --fg: 228 232 238; --fg-2: 180 188 200; --muted: 139 149 163; --brand: 255 76 82; --brand-dark: 227 30 36; --brand-ink: 255 199 201; --brand-soft: 46 22 25; --brand-light: 255 138 142; --brand-fg: 26 8 9; --ok: 74 222 128; --ok-soft: 16 40 26; --ok-ink: 134 239 172; --warn: 251 191 36; --warn-soft: 44 33 15; --warn-line: 92 67 25; --warn-ink: 253 224 141; --danger: 248 113 113; --danger-soft: 48 20 20; --danger-line: 92 36 36; --danger-ink: 254 178 178; --info: 96 165 250; --info-soft: 21 33 56; --info-ink: 191 219 254; --ink: 30 36 46; --ink-fg: 236 240 246; --shadow: 0 0 0; --shadow-sm: 0 1px 2px rgb(var(--shadow) / .35); --shadow-md: 0 1px 2px rgb(var(--shadow) / .4), 0 12px 30px -16px rgb(var(--shadow) / .85); --shadow-lg: 0 2px 6px rgb(var(--shadow) / .5), 0 24px 54px -26px rgb(var(--shadow) / .95); color-scheme: dark; } } /* Явный выбор тёмной темы — побеждает светлую системную. */ :root[data-theme="dark"] { --bg: 11 14 19; --surface: 20 25 34; --surface-2: 27 32 41; --surface-3: 33 39 50; --raised: 33 39 50; --line: 42 49 61; --line-strong: 58 67 82; --fg: 228 232 238; --fg-2: 180 188 200; --muted: 139 149 163; --brand: 255 76 82; --brand-dark: 227 30 36; --brand-ink: 255 199 201; --brand-soft: 46 22 25; --brand-light: 255 138 142; --brand-fg: 26 8 9; --ok: 74 222 128; --ok-soft: 16 40 26; --ok-ink: 134 239 172; --warn: 251 191 36; --warn-soft: 44 33 15; --warn-line: 92 67 25; --warn-ink: 253 224 141; --danger: 248 113 113; --danger-soft: 48 20 20; --danger-line: 92 36 36; --danger-ink: 254 178 178; --info: 96 165 250; --info-soft: 21 33 56; --info-ink: 191 219 254; --ink: 30 36 46; --ink-fg: 236 240 246; --shadow: 0 0 0; --shadow-sm: 0 1px 2px rgb(var(--shadow) / .35); --shadow-md: 0 1px 2px rgb(var(--shadow) / .4), 0 12px 30px -16px rgb(var(--shadow) / .85); --shadow-lg: 0 2px 6px rgb(var(--shadow) / .5), 0 24px 54px -26px rgb(var(--shadow) / .95); color-scheme: dark; }