/*
 * Valcann brand header — shared building block styles.
 * ---------------------------------------------------------------------------
 * Framework-agnostic styles for the brand header used by both the login screen
 * header and the application top bar (design.md, section "Identidade Visual e
 * Tema (Light)"; task 13.8). Consumes the brand tokens defined in theme.css.
 *
 * Import theme.css BEFORE this file so the CSS custom properties resolve.
 *
 * The logo renders at max-height ~40px with clear space around it (~half the
 * logo height). The EPI·USE red in the logo signature is NOT a UI color.
 */

.brand-header {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Clear space: ~half the logo height (logo max-height is 40px). */
  padding: 20px 24px;
  background-color: var(--color-bg);
}

/* Variant: application top bar (bottom border + subtle surface separation). */
.brand-header--topbar {
  padding-top: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}

/* Variant: login header (centered, more breathing room). */
.brand-header--login {
  justify-content: center;
  padding-top: 32px;
  padding-bottom: 32px;
}

.brand-logo {
  display: block;
  height: auto;
  max-height: 40px;
  width: auto;
}

/* Optional thin brand-gradient accent strip (use with moderation). */
.brand-header__accent {
  height: 3px;
  background-image: var(--gradient-brand);
}