/* ================================================================
Тема AuroraPlan — единственное место, где заданы цвета
================================================================
Подключается ПЕРВЫМ, до background.css и до стилей страницы:
Почему так, а не набором токенов на каждый оттенок. В стилях
около 180 мест вида rgba(255,255,255,0.5) для панелей и
rgba(44,88,120,0.18) для рамок — прозрачность везде своя, и
заводить под каждую свой токен бессмысленно. Поэтому вынесены
не готовые цвета, а две базовые КРАСКИ в виде триплетов, а
прозрачность осталась на месте применения:
было: background: rgba(255, 255, 255, 0.5);
стало: background: rgba(var(--surface-rgb), 0.5);
Светлая тема от этого не меняется ни на пиксель (подставляются
те же числа), а тёмная получается переопределением двух строк.
ВАЖНО: белый цвет, лежащий на цветной плашке — текст и плашки
внутри яркой карточки участка, шапки «полной карточки», кнопки
на градиенте — намеренно НЕ переведён на --surface-rgb. Там
белый привязан к градиенту под ним, а не к теме страницы, и в
тёмной теме должен остаться белым.
================================================================ */
:root {
/* ---------- краски поверхностей (триплеты, см. выше) ---------- */
/* Панели, карточки, шапка — то, что лежит НА фоне страницы. */
--surface-rgb: 255, 255, 255;
/* Рамки, разделители, тени — контур поверх фона. */
--line-rgb: 44, 88, 120;
/* ---------- фон страницы ---------- */
/* Базовая заливка html; сами круги-градиенты — в background.css. */
--page-base: #eef9f7;
/* ---------- текст ---------- */
--ink: #2c5878;
--ink-soft: #5f88a5;
/* Текст на цветной плашке (кнопки, яркие карточки) — от темы не
зависит, потому что фон под ним всегда цветной. */
--text: rgba(255, 255, 255, 0.96);
/* Тёмная плашка с белым текстом: сплошные кнопки, чип с кадастровым
номером, бейджи. Это ПОВЕРХНОСТЬ, а не текст, поэтому отдельный
токен: если бы тут стоял --ink, в тёмной теме он стал бы почти
белым и белый текст на нём исчез бы. */
--ink-solid: #2c5878;
/* ---------- смысловые цвета ---------- */
--ok: #2f8f66;
--warn: #9a4a2c;
--mint: #7fd9bd;
--mint-deep: #7fd9bd;
--mint-strong: #1f9c6c;
--neon: #22e6ff;
--brand-a: #0C97FA;
--brand-b: #16E1F5;
--cyan: #7fd8e0;
--gold: #e8b06a;
/* Подсветка «подставьте своё» в политике и условиях. */
--fill-in-bg: rgba(255, 200, 120, 0.35);
/* Подвал (footer.js). Светлые значения — ровно те, что были в
скрипте жёстко прописаны, чтобы светлая тема не изменилась. */
--footer-ink: rgba(15, 30, 40, 0.5);
--footer-ink-hover: rgba(15, 30, 40, 0.75);
/* ---------- курсор ---------- */
--cursor-size: 8px;
--cursor-reach: 60px;
--cursor-color: #3f9cff;
--cursor-rgb: 63, 156, 255;
/* ---------- фон страницы (круги «Color Circle», см. background.css) ----------
Заданы только краски и общая яркость свечения; размеры, позиции и
анимация живут в background.css и от темы не зависят. */
--bg-c1-rgb: 150, 235, 205; /* мятный */
--bg-c2-rgb: 120, 205, 250; /* небесно-голубой */
--bg-c3-rgb: 255, 214, 158; /* персиковый рассвет */
--bg-c4-rgb: 255, 236, 168; /* тёплое золото */
--bg-c5-rgb: 255, 255, 255; /* светлая засветка по центру */
--bg-c6-rgb: 160, 220, 255; /* голубая дымка снизу */
/* Множитель прозрачности всех кругов разом: на тёмном фоне те же
0.65 светились бы как фары, поэтому там значение меньше. */
--bg-glow: 1;
--bg-base-1: #eafff6;
--bg-base-2: #eef9f7;
--bg-base-3: #eaf6fb;
--bg-base-4: #e9f2ff;
/* ---------- прочее ---------- */
--logo-height: 34px;
/* ================================================================
ТЁМНЫЕ ЗНАЧЕНИЯ
================================================================
Лежат здесь как отдельные --dark-* и включаются ниже двумя
правилами. Так сами цвета записаны один раз: правки вносятся
только тут, а ниже — лишь переключение.
Палитра взята от about.html, которая и так тёмная (#0d2436,
текст #f2f7fa), чтобы страницы были одного рода.
================================================================ */
/* Поверхность чуть светлее фона — иначе панели сливаются. Значение
подобрано так, чтобы работать на всём диапазоне прозрачности:
при 0.5 панель едва заметна, при 0.9 — полноценная тёмная
карточка, и ни то ни другое не выцветает. */
--dark-surface-rgb: 28, 48, 66;
/* Рамки на тёмном должны быть светлее фона, а не темнее. */
--dark-line-rgb: 150, 190, 220;
--dark-page-base: #0b1b28;
--dark-ink: #f2f7fa;
--dark-ink-soft: #9fc0d1;
/* Чуть светлее светлого варианта: на почти чёрном фоне исходный
#2c5878 выглядел бы провалом, а не кнопкой. Белый текст на нём
сохраняет контраст 6:1. */
--dark-ink-solid: #2a5e8c;
/* Смысловые цвета на тёмном фоне глушатся, поэтому берём светлее
и чуть насыщеннее — иначе зелёный «готово» читается как серый. */
--dark-ok: #4ec08d;
--dark-warn: #d98a63;
--dark-mint-strong: #35c48c;
/* На тёмном та же тёплая подсветка слепит и съедает текст —
глуше и прозрачнее. */
--dark-fill-in-bg: rgba(210, 150, 60, 0.22);
--dark-footer-ink: rgba(190, 215, 232, 0.5);
--dark-footer-ink-hover: rgba(226, 240, 250, 0.85);
/* Ночной вариант фона: те же шесть кругов, но в холодной гамме —
глубокая бирюза, синева и приглушённый фиолет вместо персика и
золота; белая засветка по центру заменена мягким подсветом,
иначе она выглядела бы дырой в тёмном фоне. */
--dark-bg-c1-rgb: 20, 90, 80;
--dark-bg-c2-rgb: 24, 70, 130;
--dark-bg-c3-rgb: 90, 60, 120;
--dark-bg-c4-rgb: 40, 80, 120;
--dark-bg-c5-rgb: 40, 70, 100;
--dark-bg-c6-rgb: 30, 100, 150;
--dark-bg-glow: 0.55;
--dark-bg-base-1: #08202e;
--dark-bg-base-2: #0b1b28;
--dark-bg-base-3: #0a1d30;
--dark-bg-base-4: #0c1f38;
}
/* Автоматически — по настройке системы. :not([data-theme="light"])
нужен, чтобы ручной выбор «светлая» перекрывал системную тёмную. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--surface-rgb: var(--dark-surface-rgb);
--line-rgb: var(--dark-line-rgb);
--page-base: var(--dark-page-base);
--ink: var(--dark-ink);
--ink-soft: var(--dark-ink-soft);
--ink-solid: var(--dark-ink-solid);
--fill-in-bg: var(--dark-fill-in-bg);
--footer-ink: var(--dark-footer-ink);
--footer-ink-hover: var(--dark-footer-ink-hover);
--fill-in-bg: var(--dark-fill-in-bg);
--footer-ink: var(--dark-footer-ink);
--footer-ink-hover: var(--dark-footer-ink-hover);
--ok: var(--dark-ok);
--warn: var(--dark-warn);
--mint-strong: var(--dark-mint-strong);
--bg-c1-rgb: var(--dark-bg-c1-rgb);
--bg-c2-rgb: var(--dark-bg-c2-rgb);
--bg-c3-rgb: var(--dark-bg-c3-rgb);
--bg-c4-rgb: var(--dark-bg-c4-rgb);
--bg-c5-rgb: var(--dark-bg-c5-rgb);
--bg-c6-rgb: var(--dark-bg-c6-rgb);
--bg-glow: var(--dark-bg-glow);
--bg-base-1: var(--dark-bg-base-1);
--bg-base-2: var(--dark-bg-base-2);
--bg-base-3: var(--dark-bg-base-3);
--bg-base-4: var(--dark-bg-base-4);
color-scheme: dark;
}
}
/* Вручную — тумблером в шапке (см. theme.js). Перекрывает систему. */
:root[data-theme="dark"] {
--surface-rgb: var(--dark-surface-rgb);
--line-rgb: var(--dark-line-rgb);
--page-base: var(--dark-page-base);
--ink: var(--dark-ink);
--ink-soft: var(--dark-ink-soft);
--ink-solid: var(--dark-ink-solid);
--ok: var(--dark-ok);
--warn: var(--dark-warn);
--mint-strong: var(--dark-mint-strong);
--bg-c1-rgb: var(--dark-bg-c1-rgb);
--bg-c2-rgb: var(--dark-bg-c2-rgb);
--bg-c3-rgb: var(--dark-bg-c3-rgb);
--bg-c4-rgb: var(--dark-bg-c4-rgb);
--bg-c5-rgb: var(--dark-bg-c5-rgb);
--bg-c6-rgb: var(--dark-bg-c6-rgb);
--bg-glow: var(--dark-bg-glow);
--bg-base-1: var(--dark-bg-base-1);
--bg-base-2: var(--dark-bg-base-2);
--bg-base-3: var(--dark-bg-base-3);
--bg-base-4: var(--dark-bg-base-4);
color-scheme: dark;
}
/* ---------- главная: ночное небо ----------
На главной небо рисует не фон страницы, а отдельный слой .sky, и
его красит app.js по суточному циклу (положение солнца). Трогать
эту механику нельзя, поэтому в тёмной теме просто накрываем небо
вуалью: цикл продолжает идти, солнце продолжает всходить, но
страница перестаёт слепить. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .sky::after {
content: "";
position: absolute;
inset: 0;
background: rgba(7, 18, 30, 0.68);
pointer-events: none;
}
}
:root[data-theme="dark"] .sky::after {
content: "";
position: absolute;
inset: 0;
background: rgba(7, 18, 30, 0.68);
pointer-events: none;
}
/* ---------- логотип ----------
Кружок эмблемы залит currentColor, а фигурка внутри — всегда белая.
Пока текст был тёмно-синим, это работало; в тёмной теме --ink стал
почти белым, и фигурка растворилась в кружке. Поэтому эмблеме —
свой цвет: та же «тёмная плашка под белым», что у сплошных кнопок. */
.brand__fallback { color: var(--ink-solid); }
/* ---------- тумблер темы в шапке ---------- */
.theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
border: 1px solid rgba(var(--line-rgb), 0.22);
border-radius: 999px;
background: rgba(var(--surface-rgb), 0.5);
color: var(--ink);
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.theme-toggle:hover { background: rgba(var(--surface-rgb), 0.8); }
.theme-toggle svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Показываем солнце или луну — ту иконку, в какую тему переключит
нажатие. Обе лежат в разметке, лишняя прячется. */
.theme-toggle__moon { display: block; }
.theme-toggle__sun { display: none; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .theme-toggle__moon { display: none; }
:root:not([data-theme="light"]) .theme-toggle__sun { display: block; }
}
:root[data-theme="dark"] .theme-toggle__moon { display: none; }
:root[data-theme="dark"] .theme-toggle__sun { display: block; }
:root[data-theme="light"] .theme-toggle__moon { display: block; }
:root[data-theme="light"] .theme-toggle__sun { display: none; }