/* Оформление mexm.io (код бренда feetaxa) поверх нейтральных токенов панели и кабинета.
 *
 * wlctl spa кладёт этот файл в dist/brand/theme.css, index.html подключает его
 * после общих стилей. Селектор html:root специфичнее :root из tokens.css, поэтому
 * значения отсюда побеждают при любом порядке подключения.
 *
 * Цвета сняты с аватара бота @EnergyMexMBot (он же logo.svg): индиго-молния #2D2862
 * на лаймовом фоне #D4FA33. Основной — индиго: на нём белый текст кнопок читается,
 * на лайме — нет. Основной и акцентный цвет дополнительно приходят с сервера
 * (/branding) и перекрывают эти.
 */
html:root {
  --brand-primary: #2d2862;
  --brand-primary-rgb: 45, 40, 98;
  --brand-accent: #d4fa33;
  --brand-accent-rgb: 212, 250, 51;
  --brand-deep: #1c1845;
  --ink: #16142e;
  --ink-rgb: 22, 20, 46;
}

/* Логотип — только знак (круглый аватар бота), без надписи. Поэтому он крупнее
 * стандартных 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);
}

/* Лайм — фирменный цвет аватара, но белый текст на нём не читается. Поэтому он
 * идёт фоном там, где текст тёмный (выбранный пункт меню, как молния на аватаре),
 * и цветом текста на индиго (активный переключатель). Контраст в обоих случаях ~10:1. */
html:root .nav__item--active,
html:root .nav__item--active:hover {
  background: var(--brand-accent);
  color: var(--brand-primary);
  font-weight: 600;
}

html:root .segmented__item--active,
html:root .segmented__item--active:hover { color: var(--brand-accent); }

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