/* БРЕНД-1: фирменный шрифт и знак «ROXBER ERP».
 *
 * Этот файл НЕ бандлится esbuild'ом: он содержит url() к статике (/fonts, /brand-mark.svg),
 * а esbuild для абсолютных путей в CSS падает с "Could not resolve". Поэтому подключается
 * отдельным <link> в index.html — тем же приёмом, что и /dhtmlxgantt.css.
 * Токены (--brand-color) и раскладка контейнера .header-logo живут в бандле
 * (src/styles/variables.css и src/styles/main.css); CSS-переменные видны и отсюда.
 *
 * Шрифт — Cormorant Garamond (SIL OFL 1.1, см. fonts/OFL-CormorantGaramond.txt):
 * подобран как ближайший бесплатный к начертанию «РОКСБЕР» в фирменном логотипе
 * (высококонтрастный элегантный серив с тонкими засечками и широким трекингом).
 * Используется ТОЛЬКО для бренда — в шапке и на экране входа. Латинская подвыборка.
 */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;            /* вариативный woff2 (латиница) */
  font-display: swap;
  src: url('/fonts/cormorant-garamond-latin.woff2') format('woff2');
}

/* Фирменный знак — один SVG (/brand-mark.svg). Красится через mask + background-color,
 * поэтому знак и надпись всегда одного фирменного цвета и адаптируются к теме. */
.brand-mark {
  display: inline-block;
  flex: 0 0 auto;
  background-color: var(--brand-color);
  -webkit-mask: url('/brand-mark.svg') center / contain no-repeat;
  mask: url('/brand-mark.svg') center / contain no-repeat;
}

/* Надпись «ROXBER ERP» фирменным шрифтом и цветом. */
.brand-name {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  color: var(--brand-color);
  letter-spacing: 0.07em;
  line-height: 1;
  white-space: nowrap;
}

/* ── Шапка ── знак 26 px + надпись 16 px. */
.header-logo .brand-mark { width: 26px; height: 26px; }
.header-logo .brand-name { font-size: 16px; }

/* Свёрнутый сайдбар (только десктоп, ≥900px — синхронно с sidebar.css):
 * в шапке остаётся только знак, надпись прячется ради горизонтального места. */
@media (min-width: 900px) {
  #app.is-sidebar-collapsed .header-logo .brand-name { display: none; }
}

/* ── Экран входа ── знак крупнее, название под ним. */
.login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--space-5);
}
.login-brand .brand-mark { width: 56px; height: 56px; }
.login-brand .brand-name { font-size: 30px; letter-spacing: 0.06em; }