:root {
  --gradient-start: #6366f1;
  --gradient-end: #ec4899;
}

.brand-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 700;
  font-size: clamp(1.4rem, 2vw, 1.85rem);
  letter-spacing: -0.04em;
  text-decoration: none;
}

.brand-wordmark .brand-gradient {
  background: linear-gradient(135deg, #6366f1, #ec4899);
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.brand-wordmark .brand-neutral {
  color: rgba(15, 23, 42, 0.84);
  -webkit-text-fill-color: rgba(15, 23, 42, 0.84);
  transition: color 0.2s ease;
}

.brand-wordmark--light .brand-neutral {
  color: rgba(15, 23, 42, 0.84);
  -webkit-text-fill-color: rgba(15, 23, 42, 0.84);
}

.brand-wordmark--dark .brand-neutral {
  color: rgba(226, 232, 240, 0.9);
  -webkit-text-fill-color: rgba(226, 232, 240, 0.9);
}

.brand-wordmark--compact {
  font-size: 1.35rem;
}

.brand-wordmark:hover {
  text-decoration: none;
  filter: brightness(1.05);
}

.brand-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.85), rgba(236, 72, 153, 0.85));
  color: #fff;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  transform: translateY(1px);
}

.brand-mark {
  font-size: 1.4rem;
}

.brand-mark .brand-wordmark {
  font-size: 1.25rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
}

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

.brand-primary {
  color: #a855f7;
  background: -webkit-linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
  background: linear-gradient(315deg, var(--gradient-start), var(--gradient-end));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.brand-secondary {
  color: #fff;
}

.brand--sidebar {
  font-size: 1.35rem;
}