/* ============================================================
AiKora — Design System (извлечено из редизайна «Реставрация фото»)
Единый источник истины. Подключать из base.html ОДИН раз:
Шрифты (Spectral/Public Sans/IBM Plex Mono) self-hosted в fonts.css —
не Google Fonts CDN (fonts.googleapis.com тормозил/был недоступен с
боевого VPS, см. docs/DEPLOYMENT_LOG.md, раздел 14).
Затем удалить конкурирующие языки со страниц (см. DESIGNER_BRIEF §5):
индиго #4f46e5 из base.html, графит из landing.html, CDN-Bootstrap.
============================================================ */
:root{
/* --- Поверхности --- */
--bg: #f4f1ea; /* фон страницы — тёплый кремовый */
--surface: #fffdf9; /* карточки/панели */
--surface-2: #f8f5ee; /* вторичная поверхность */
--sunken: #ece7dc; /* утопленные: disabled, неактивные шаги, плейсхолдеры */
/* --- Границы --- */
--border: #d8cfbe; /* основная граница карточек (усилена — было #e6e0d4, сливалось) */
--border-2: #c7bca8; /* заметная граница: инпуты, dropzone (было #d7d0c1) */
--line: #e2dacb; /* тонкий разделитель строк таблицы — светлее --border */
--zebra: #f8f4ec; /* фон каждой второй строки таблицы */
/* --- Текст --- */
--ink: #241f18; /* основной — тёплый почти-чёрный, не #000 */
--ink-2: #59534a; /* вторичный: подписи, описания (усилен — было #6b6559, слишком бледно) */
--ink-3: #847c6d; /* третичный: хинты, метаданные (усилен — было #9c9486) */
/* --- Акцент (приглушённый оливково-зелёный, НЕ индиго/графит) --- */
--accent: #5c7357;
--accent-d: #495d45; /* hover/active */
--accent-soft: #e8eee4; /* заливка выбранных состояний, чипы */
--accent-line: #c3d0bd; /* граница accent-soft элементов */
/* --- Статусы --- */
--success: #557a4e; --success-soft: #e7efe2;
--warning: #a67c3c; --warning-soft: #f4ecd8;
--error: #a24d3d; --error-soft: #f5e5e0;
--focus: #8aa583;
/* --- Семантические токены темы (ОБЯЗАТЕЛЬНЫ для корректной тёмной темы) --- */
--on-accent: #ffffff; /* текст/иконки поверх --accent (в тёмной теме станет тёмным) */
--nav-bg: rgba(255,253,249,.85); /* фон липкой шапки (blur) */
--card-btn-bg: #fffdf9; /* кнопка на тёмной карточке баланса (заливка) */
--card-btn-bg-h:#ffffff;
--card-btn-fg: #3c4c39; /* её текст */
--warn-line: #e8d9b4; /* граница warning-плашек/бейджей */
/* --- Типографика --- */
--display: 'Spectral', Georgia, serif; /* заголовки — serif */
--ui: 'Public Sans', system-ui, sans-serif; /* текст/интерфейс */
--mono: 'IBM Plex Mono', ui-monospace, monospace; /* числа/метки */
/* --- Форма --- */
--r-card: 18px;
--r-btn: 12px;
--r-chip: 999px;
--r-input: 12px;
--r-thumb: 14px;
/* --- Тени (тёплый оттенок чернил, не нейтральный чёрный) --- */
--shadow-sm: 0 1px 2px rgba(43,39,33,.06);
--shadow: 0 1px 2px rgba(43,39,33,.05), 0 12px 34px rgba(43,39,33,.06);
--shadow-lg: 0 8px 20px rgba(43,39,33,.12), 0 30px 70px rgba(43,39,33,.18);
}
/* ============================================================
ТЁМНАЯ ТЕМА
Активируется атрибутом на или : .
Переключатель в UI пишет выбор в localStorage; при первом входе можно
опираться на @media (prefers-color-scheme: dark) — см. блок ниже.
Тёмная тема — это НЕ инверсия цветов и НЕ просто смена фона: подобраны
отдельные значения с проверкой контраста (заголовки, текст на акценте,
кнопка карточки баланса, границы статусов).
============================================================ */
[data-theme="dark"]{
--bg: #1c1a17; /* тёплый тёмный, не чёрный */
--surface: #26241f; /* приподнятая поверхность (карточки) */
--surface-2: #211f1b;
--sunken: #302d27;
--border: #35322b;
--border-2: #413d35;
--ink: #f4f0e8; /* основной текст — тёплый почти-белый (чуть ярче) */
--ink-2: #c8c2b4; /* вторичный: подписи/описания — поднята яркость в тёмной теме */
--ink-3: #9a9284; /* третичный: хинты/метаданные — поднята яркость */
--accent: #8aa583; /* осветлён для читаемости на тёмном фоне */
--accent-d: #9db996; /* hover — ещё светлее */
--accent-soft: #2c352a; /* тёмная заливка выбранных состояний */
--accent-line: #3d4a3a;
--success: #7fa877; --success-soft: #232c20;
--warning: #c79a54; --warning-soft: #332b1c;
--error: #cf7b6a; --error-soft: #33211d;
--focus: #8aa583;
--line: #332f27;
--zebra: #221f1a;
--on-accent: #16201a; /* тёмный текст поверх светлого акцента */
--nav-bg: rgba(28,26,23,.85);
--card-btn-bg: #dfeada; /* светло-зелёная кнопка на зелёной карточке баланса */
--card-btn-bg-h:#e9f1e5;
--card-btn-fg: #1e2a1c;
--warn-line: #4a3f24;
/* тени на тёмном фоне почти не видны — усиливаем непрозрачность */
--shadow-sm: 0 1px 2px rgba(0,0,0,.3);
--shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 34px rgba(0,0,0,.35);
--shadow-lg: 0 8px 20px rgba(0,0,0,.45), 0 30px 70px rgba(0,0,0,.55);
}
/* Автовыбор тёмной темы при первом входе, пока пользователь не выбрал вручную.
Удалите/скорректируйте, если тема всегда задаётся явным атрибутом. */
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
color-scheme: dark;
}
}
/* ОБЯЗАТЕЛЬНЫЙ ресет: браузер сбрасывает цвет у