/* -------------------------------------------------------- */
/* 🔹 App Brand                                             */
/* -------------------------------------------------------- */
/* Reusable logo + name combination                         */
/* Used in nav bar, footer, and anywhere the brand appears  */

.app-brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: var(--text-title-weight);
  color: var(--color-primary);
  text-decoration: none;
}

.app-brand:hover {
  text-decoration: none;
}

.app-brand__icon {
  height: 28px;
  width: auto;
  border-radius: 22%;
}

.app-brand__name {
  font-size: var(--text-headline-medium);
  line-height: 1;
}


/* -------------------------------------------------------- */
/* 🔹 Size variants                                         */
/* -------------------------------------------------------- */

.app-brand--small .app-brand__icon {
  height: 18px;
}

.app-brand--small .app-brand__name {
  font-size: var(--text-title-large);
}

.app-brand--large .app-brand__icon {
  height: 32px;
}

.app-brand--large .app-brand__name {
  font-size: var(--text-headline-large);
}