/* variables.css — Sahel Market theme (Banani) — warm sand + amber */ :root { /* === ОСНОВНЫЕ ЦВЕТА (Sahel Market) === */ --primary-color: #0e0d0c; /* тёплый чёрный — фон */ --secondary-color: #161515; /* карточки */ --elevated-color: #1f1e1d; /* поднятые элементы */ --accent-color: #ffb02e; /* яркий amber — главный акцент */ --accent-dim: #d97706; /* amber приглушённый */ --accent-glow: rgba(255,176,46,0.12); /* === АЛИАСЫ ФОНОВ (для фич, использующих --bg-*) === */ --bg-primary: #0e0d0c; --bg-secondary: #161515; --bg-tertiary: #1f1e1d; /* === СИГНАЛЬНЫЕ ЦВЕТА === */ --success-color: #2fa05a; --warning-color: #f09b00; --danger-color: #b83a2f; --info: #3b82f6; /* === АЛИАСЫ СИГНАЛЬНЫХ (историческе имена из фич) === Раньше были не определены: объявления с ними молча схлопывались в unset, а варианты с fallback уезжали в чужие палитры (Material #f44336 / #4caf50 / #ff9800). Держим их алиасами, чтобы весь проект считал цвет из одного места. */ --error-color: var(--danger-color); --info-color: var(--info); --accent-green: var(--success-color); --accent-orange: var(--warning-color); --color-unique: var(--rarity-legendary); /* === ТЕКСТ === */ --text-primary: #f6e2c9; /* тёплый песочный белый */ --text-secondary: #bdb0a0; /* тёплый серо-песочный */ --text-muted: #8a8279; /* приглушённый коричневый */ --text-tertiary: var(--text-muted); /* === ГРАНИЦЫ === */ --border-color: #252a36; --border-dim: rgba(37,42,54,0.5); --border-accent: rgba(255,176,46,0.3); /* === ВЫДЕЛЕНИЕ === */ --highlight: #ffb02e; /* === РЕДКОСТЬ ПРЕДМЕТОВ === */ --rarity-common: #bdb0a0; --rarity-uncommon: #60a5fa; --rarity-rare: #818cf8; --rarity-epic: #c084fc; --rarity-legendary: #ffb02e; /* === КАЧЕСТВО ПРЕДМЕТОВ === */ --quality-trash: #71717a; --quality-poor: #bdb0a0; --quality-normal: #60a5fa; --quality-good: #c084fc; --quality-great: #ffb02e; --quality-perfect: #ef4444; /* === РАЗМЕРЫ === */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 12px; --spacing-lg: 16px; --spacing-xl: 24px; /* === РАДИУС (Banani) === */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; /* === CARD === */ --card-bg: #161515; --card-fg: #efd9b8; /* Алиасы карточных поверхностей — фичи писали их с fallback'ами (#1a1a1a, #1a1a2e, rgba(255,255,255,.06)), из-за чего один и тот же «фон карточки» отличался от экрана к экрану. */ --surface-card: var(--card-bg); --bg-card: var(--card-bg); /* ══════════════════════════════════════════════════════════════ БОЁВКА — единый визуальный слой (см. src/styles/combat.css) Тактическая структура (фикс-панель, заряд внутри кнопки атаки) на палитре дизайн-системы Sahel. ══════════════════════════════════════════════════════════════ */ /* Поверхности */ --cmb-panel-bg: rgba(22, 21, 21, 0.98); /* --secondary-color + прозрачность */ --cmb-surface: var(--secondary-color); /* карточки бойцов, блоки */ --cmb-well: var(--primary-color); /* «колодцы»: лог, слоты скиллов */ --cmb-elevated: var(--elevated-color); /* второстепенные кнопки */ --cmb-border: var(--border-color); --cmb-border-soft: rgba(255, 255, 255, 0.07); /* Кнопка атаки */ --cmb-attack-bg: var(--accent-color); --cmb-attack-fg: var(--primary-color); /* Стадии заряда (одна шкала на все шесть боёвок). Заливка идёт поверх амбровой кнопки, поэтому все три стадии взяты темнее --accent-color: --warning-color (#f09b00) на ней почти не читался, ушли на --accent-dim. */ --cmb-charge-low: var(--danger-color); --cmb-charge-mid: var(--accent-dim); --cmb-charge-high: var(--success-color); /* Стороны боя */ --cmb-ally: var(--success-color); --cmb-ally-fill: rgba(47, 160, 90, 0.22); --cmb-enemy: var(--danger-color); --cmb-enemy-fill: rgba(184, 58, 47, 0.22); --cmb-boss: var(--rarity-epic); --cmb-boss-fill: rgba(192, 132, 252, 0.18); --cmb-target: var(--accent-color); /* Исходы удара — один словарь цветов на лог, чипы статусов и вспышки. Сервер называет исход сам (app/combat/events.py), фронт только красит. Раньше крит, рикошет и обычное попадание были одним и тем же красным. */ --cmb-crit: var(--accent-color); --cmb-crit-fill: rgba(255, 176, 46, 0.5); --cmb-ricochet: var(--rarity-uncommon); /* холодный синий: скользнуло по броне */ --cmb-ricochet-fill: rgba(96, 165, 250, 0.3); --cmb-pierce: var(--rarity-rare); /* обратный полюс рикошета: броня не помогла */ --cmb-pierce-fill: rgba(129, 140, 248, 0.42); --cmb-plate: var(--rarity-epic); --cmb-plate-fill: rgba(192, 132, 252, 0.42); --cmb-dodge: var(--text-muted); --cmb-suppress: var(--warning-color); --cmb-suppress-fill: rgba(240, 155, 0, 0.28); /* Фазы PvE-паттерна (app/combat/patterns.py). Два новых цвета, потому что оба уже занятых сигнальных — амбра крита и оранжевый подавления — в бою мелькают постоянно, а замах обязан читаться с первого кадра. Замах горячее любого исхода, окно — единственный холодный «плюс». */ --cmb-telegraph: #ff5a3c; --cmb-telegraph-fill: rgba(255, 90, 60, 0.34); --cmb-vulnerable: #22d3ee; --cmb-vulnerable-fill: rgba(34, 211, 238, 0.3); /* Рана — тот же красный, что и урон: это и есть урон, просто растянутый. */ --cmb-bleed: var(--cmb-enemy); /* Реплика напарника (app/combat/callouts.py) — приглушённее любого исхода: это не факт боя, а голос рядом, и он не должен спорить за внимание с цифрами урона. */ --cmb-callout: var(--text-muted); /* ══════════════════════════════════════════════════════════ ПОЛЕ БОЯ — ленты клеток (src/shared/combat-field.js, §7) ══════════════════════════════════════════════════════════ */ /* Палитра сторон. Первые две — те же союзник/противник: при двух сторонах цветная метка обязана совпадать с цветом рамки клетки, иначе она вводит в заблуждение вместо того, чтобы различать. Третья и четвёртая нужны только клановым войнам на 3+ клана. */ --cmb-side-1: var(--cmb-ally); --cmb-side-2: var(--cmb-enemy); --cmb-side-3: #b06fd8; --cmb-side-4: #35a8c4; /* Укрытия. Цвет здесь — не украшение: тип укрытия читается с ленты быстрее по фону полосы, чем по иконке размером в шесть пикселей. Земляные — тёплые, техника и здания — холодные. */ --cmb-cover-trench: #6b5b3e; --cmb-cover-crater: #57493a; --cmb-cover-sandbags: #8a7448; --cmb-cover-wreck: #6d4a3a; --cmb-cover-ruin: #4f5560; --cmb-cover-building: #5d6675; /* Геометрия ленты. Ширину клетки и число видимых ставит JS инлайном на контейнере (`CombatField._measure`) — здесь только запасные значения на первый кадр, пока контейнер ещё не измерен. */ --cmb-cell-w: 48px; --cmb-cells: 7; --cmb-cell-min: 44px; --cmb-cell-gap: 5px; --cmb-cover-h: 13px; /* Геометрия */ --cmb-radius: var(--radius-sm); --cmb-gap: 6px; --cmb-pad: 12px; --cmb-h-attack: 52px; --cmb-h-skill: 44px; --cmb-h-action: 40px; --cmb-h-bar: 10px; /* полоса без подписи внутри */ --cmb-h-bar-labeled: 18px; /* полоса, внутри которой лежит текст */ --cmb-h-log: 168px; /* Запас снизу под фикс-панель: 3 ряда (атака+скиллы+действия) и 2 ряда */ --cmb-reserve-3: 178px; --cmb-reserve-2: 134px; /* Типографика лога боя */ --cmb-log-font: var(--font-mono); --cmb-log-size: 12px; } /* ══════════════════════════════════════════════════════════════════ ТИПОГРАФИКА Раньше шрифт объявлялся дважды и по-разному: html/body шли стеком -apple-system → BlinkMacSystemFont → 'Segoe UI' → system-ui, а .app-container перекрывал его стеком 'Inter' → system-ui → -apple-system. Порядок разный, поэтому на части платформ выбирался разный шрифт. Плюс 'Inter' в проект никогда не подключался (ни @font-face, ни CDN) — это была мёртвая первая позиция в стеке. Теперь стек один и честный. ══════════════════════════════════════════════════════════════════ */ :root { --font-ui: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }