/* * Токены темы. Светлая живёт в :root, тёмная — в [data-theme="dark"]; * тема ставится атрибутом на ещё до отрисовки, поэтому переключение * не мигает белым. Ни один цвет ниже по файлу не задаётся напрямую: иначе * половина интерфейса осталась бы светлой в чёрной теме. */ :root { /* * Светлая тема по правилу 60-30-10: серый холст и белые карточки как * основной объём, почти чёрный графит как дополнительный, синий — только * на акценты. Поэтому синего в интерфейсе намеренно мало: он остаётся * заметным ровно до тех пор, пока им не покрашено всё подряд. */ --bg: #e6e6e6; --bg-deep: #dcdcdc; --surface: #ffffff; --surface-2: #f4f4f5; --surface-3: #eaeaec; --surface-sunken: #f0f0f1; --line: #d7d7da; --line-soft: #e6e6e8; --line-strong: #bfbfc4; --ink: #101010; --ink-soft: #3a3a3d; --muted: #77777d; --faint: #9c9ca3; --accent: #2450dc; --accent-hover: #1c40b8; --accent-ink: #ffffff; --accent-text: #1e45c4; --accent-soft: #e2e8fb; --accent-line: #b9c8f3; --accent-glow: 0 6px 18px rgba(36, 80, 220, .25); --good: #12805f; --good-soft: #dcf0e7; --bad: #c8364c; --bad-soft: #f8dee2; --warn: #8f6412; --warn-soft: #f6ecd6; --info-soft: #e5e9f4; --info-ink: #37476f; /* * Выходные в таблицах по дням. Серый совпадал с фоном соседних служебных * ячеек, и суббота с воскресеньем терялись; розовый читается как «другой * день недели», а не как «здесь чего-то не хватает». */ --weekend: #fdebf1; --weekend-head: #fbdfe8; --shadow-sm: 0 1px 2px rgba(16, 16, 16, .06); --shadow-md: 0 8px 24px rgba(16, 16, 16, .09); --shadow-lg: 0 24px 64px rgba(16, 16, 16, .2); --radius: 16px; --radius-sm: 10px; --spark-1: #2450dc; --spark-2: #2e9a78; --spark-3: #c08a2a; --spark-4: #5a7fc7; color-scheme: light; } [data-theme="dark"] { --bg: #000000; --bg-deep: #000000; --surface: #0b0b0f; --surface-2: #101017; --surface-3: #17171f; --surface-sunken: #08080c; --line: #1f2029; --line-soft: #17181f; --line-strong: #2c2d3a; --ink: #f2f3f7; --ink-soft: #c3c7d3; --muted: #8b90a0; --faint: #656a79; --accent: #4a72f5; --accent-hover: #6288ff; --accent-ink: #0b0b0f; --accent-text: #8aa4ff; --accent-soft: #131a33; --accent-line: #2a3a68; --accent-glow: 0 0 0 1px rgba(74, 114, 245, .35), 0 8px 26px rgba(36, 80, 220, .4); --good: #35d39b; --good-soft: #0d2a20; --bad: #ff6b81; --bad-soft: #2c1017; --warn: #e5a640; --warn-soft: #2a2010; --info-soft: #121a2c; --info-ink: #93aeea; --weekend: #2a1119; --weekend-head: #351622; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .6); --shadow-md: 0 10px 28px rgba(0, 0, 0, .6); --shadow-lg: 0 26px 70px rgba(0, 0, 0, .75); --spark-1: #3a5fd8; --spark-2: #2aa77e; --spark-3: #b7822f; --spark-4: #4a7cc0; color-scheme: dark; }