/* Оформление Pandeetron (код бренда pandee) поверх нейтральных токенов панели и кабинета.
 *
 * wlctl spa кладёт этот файл в dist/brand/theme.css, index.html подключает его
 * после общих стилей. Селектор html:root специфичнее :root из tokens.css, поэтому
 * значения отсюда побеждают при любом порядке подключения.
 *
 * Цвета сняты с аватара бота @Pandee_Tron_Energy_bot (он же logo.svg): панда на
 * тёмно-зелёном круге #005020, фон светло-зелёный #72C66A. Основной — тёмно-зелёный:
 * на нём белый текст кнопок читается. Светло-зелёный — акцент. Основной и акцентный
 * цвет дополнительно приходят с сервера (/branding) и перекрывают эти.
 */
html:root {
  --brand-primary: #005020;
  --brand-primary-rgb: 0, 80, 32;
  --brand-accent: #72c66a;
  --brand-accent-rgb: 114, 198, 106;
  --brand-deep: #013b13;
  --ink: #102017;
  --ink-rgb: 16, 32, 23;
}

/* Логотип — только знак (круглый аватар бота), без надписи. Поэтому он крупнее
 * стандартных 24 px, а имя бренда выводится рядом текстом. */
html:root .shell__brand { gap: 10px; }
html:root .shell__logo { height: 36px; border-radius: 50%; }
html:root .shell__logo + .shell__wordmark {
  display: inline;
  font-size: 22px;
  line-height: 36px;
  color: var(--brand-primary);
}

/* Светло-зелёный фон аватара — подложкой выбранного пункта меню, текст на нём
 * тёмно-зелёный (контраст ~6:1); выбранные варианты — лёгкой зелёной подложкой. */
html:root .nav__item--active,
html:root .nav__item--active:hover {
  background: var(--brand-accent);
  color: var(--brand-deep);
  font-weight: 600;
}

html:root .chip--active { background: rgba(var(--brand-accent-rgb), .18); }