/* =====================================================================
   Hebreus Product Design System — Signature Components (Phase 1)
   Escrito à mão. Consome hb-tokens.generated.css + hb-foundation.css.

   Fundação apenas — §11/§12 da missão. Quatro componentes-assinatura
   (Primary Button, Definition Row, State Tile, Section Header) mais as
   primitives explicitamente autorizadas para o harness (Secondary
   Button, Icon Button, Input underline/outlined, Card, Chip, Loading,
   Responsive Pair, Link — Phase 2). NÃO inclui Select, Checkbox, Radio, Switch, Tabs,
   Table, Toast, Modal, Drawer, Bottom sheet — OPEN DECISION, §22.7 do
   documento canônico.

   Todo elemento interativo aqui usa `.hb-focusable` (definido em
   hb-foundation.css) para herdar o anel de foco canônico — nenhum
   componente declara seu próprio `:focus`.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Button — base compartilhada por primary e secondary.
   HEBREUS_PRODUCT_DESIGN_SYSTEM.md §13.1/§13.2.
   --------------------------------------------------------------------- */
.hb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hb-space-2);
  min-height: var(--hb-size-button-height);
  padding: var(--hb-space-5) var(--hb-space-6);
  border: none;
  border-radius: var(--hb-radius-action);
  font-family: var(--hb-typography-scale-label-large-font-family);
  font-size: var(--hb-typography-scale-label-large-font-size);
  font-weight: var(--hb-typography-scale-label-large-font-weight);
  letter-spacing: var(--hb-typography-scale-label-large-letter-spacing);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--hb-motion-transition-hover),
    border-color var(--hb-motion-transition-hover);
}

.hb-btn:active {
  transition: background-color var(--hb-motion-transition-press-in),
    border-color var(--hb-motion-transition-press-in);
}

/* Primary — tinta cheia, sem ícone. §13.1 */
.hb-btn--primary {
  background: var(--hb-color-text-primary);
  color: var(--hb-color-white);
}

.hb-btn--primary:hover {
  background: var(--hb-color-interactive-hover-ink);
}

.hb-btn--primary:active {
  background: var(--hb-color-interactive-pressed-ink);
}

/* Desabilitado "indisponível" — rótulo em text.disabled não se aplica
   aqui: este token é para "ocupado" (aria-disabled), ver abaixo. */
.hb-btn--primary:disabled {
  background: var(--hb-color-control-fill-disabled);
  color: var(--hb-color-text-secondary);
  cursor: not-allowed;
  transition: none;
}

/* "Ocupado" — rótulo mutante ("Salvando…") com enabled=false via
   aria-disabled + aria-busy, NUNCA `disabled` puro (§7 do documento de
   estados web): o controle precisa continuar focável/anunciável. */
.hb-btn--primary[aria-disabled="true"] {
  background: var(--hb-color-control-fill-disabled);
  color: var(--hb-color-text-secondary);
  cursor: progress;
}

/* Secondary — contornado. §13.2 */
.hb-btn--secondary {
  background: var(--hb-color-surface);
  border: var(--hb-border-hairline);
  color: var(--hb-color-text-primary);
}

.hb-btn--secondary:hover {
  background: var(--hb-color-interactive-hover-surface);
}

.hb-btn--secondary:active {
  background: var(--hb-color-interactive-pressed-surface);
}

.hb-btn--secondary:disabled {
  color: var(--hb-color-text-disabled);
  border: var(--hb-border-field-disabled);
  cursor: not-allowed;
  transition: none;
}

/* Par de ações — secundária à esquerda, primária à direita (§13.2).
   Empilha sob a regra de largura/fontScale (§8.4), ver .hb-pair. */
.hb-btn-pair {
  display: flex;
  gap: var(--hb-space-4);
}

.hb-btn-pair .hb-btn {
  flex: 1 1 0;
}

/* ---------------------------------------------------------------------
   Icon Button — §13.3. Alvo 48px, glifo 24, transparente em repouso.
   --------------------------------------------------------------------- */
.hb-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--hb-size-touch-target);
  height: var(--hb-size-touch-target);
  padding: 0;
  border: none;
  border-radius: var(--hb-radius-action);
  background: transparent;
  color: var(--hb-color-text-primary);
  cursor: pointer;
  transition: background-color var(--hb-motion-transition-hover);
}

.hb-icon-btn:active {
  transition: background-color var(--hb-motion-transition-press-in);
}

.hb-icon-btn:hover {
  background: var(--hb-color-interactive-hover-surface);
}

.hb-icon-btn:active {
  background: var(--hb-color-interactive-pressed-surface);
}

.hb-icon-btn:disabled {
  color: var(--hb-color-text-disabled);
  background: transparent;
  cursor: not-allowed;
  transition: none;
}

.hb-icon-btn .material-symbols-outlined {
  font-size: var(--hb-size-icon-default);
}

/* ---------------------------------------------------------------------
   Definition Row — componente-assinatura. §13.9.
   Rótulo mono caixa-alta apagado à esquerda, valor à direita, fio
   interno entre linhas (a última não tem).
   --------------------------------------------------------------------- */
.hb-definition-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--hb-space-4);
  padding: var(--hb-space-definition-row-comfortable) 0;
  border-bottom: var(--hb-border-internal);
}

.hb-definition-row:last-child {
  border-bottom: none;
}

.hb-definition-row--dense {
  padding-top: var(--hb-space-definition-row-dense);
  padding-bottom: var(--hb-space-definition-row-dense);
}

.hb-definition-row__label {
  font-family: var(--hb-typography-scale-label-small-font-family);
  font-size: var(--hb-typography-scale-label-small-font-size);
  font-weight: var(--hb-typography-scale-label-small-font-weight);
  letter-spacing: var(--hb-typography-scale-label-small-letter-spacing);
  text-transform: uppercase;
  color: var(--hb-color-text-secondary);
  white-space: nowrap;
  /* flex-shrink sozinho não basta: o min-width padrão de um item flex é
     `auto` (= tamanho de conteúdo), não 0 — sem isto o rótulo nunca
     cede espaço e a linha estoura a largura do contêiner em viewports
     efetivos muito estreitos (zoom 200%+ em 390px). Achado em teste de
     zoom real da Phase 3 (viewport reduzido, não `body.style.zoom`). */
  min-width: 0;
  flex-shrink: 0;
}

/* Valor textual (nome de pessoa, prosa) — papel Interface. */
.hb-definition-row__value {
  font-family: var(--hb-typography-scale-body-small-font-family);
  font-size: var(--hb-typography-scale-body-small-font-size);
  font-weight: var(--hb-typography-scale-body-small-font-weight);
  color: var(--hb-color-text-primary);
  text-align: right;
  min-width: 0;
  overflow-wrap: break-word;
}

/* Valor de dado (horário, NSR, hash, código) — papel Technical
   obrigatório (§5.3 do documento principal: nunca um dado fora do
   Technical). */
.hb-definition-row__value--technical {
  font-family: var(--hb-typography-family-technical);
  font-size: 13px;
  font-weight: var(--hb-typography-weight-regular);
}

/* Linha interativa (dentro de um Card, nunca solta sobre o papel —
   §4.4 do documento de estados web). */
.hb-definition-row--interactive {
  cursor: pointer;
  border-radius: var(--hb-radius-control);
  padding-left: var(--hb-space-3);
  padding-right: var(--hb-space-3);
  margin: 0 calc(var(--hb-space-3) * -1);
  transition: background-color var(--hb-motion-transition-hover);
}

.hb-definition-row--interactive:active {
  transition: background-color var(--hb-motion-transition-press-in);
}

.hb-definition-row--interactive:hover {
  background: var(--hb-color-interactive-hover-surface);
}

.hb-definition-row--interactive:active {
  background: var(--hb-color-interactive-pressed-surface);
}

/* ---------------------------------------------------------------------
   State Tile — componente-assinatura. §13.11.
   Retrato de todo estado do sistema: sucesso, atenção, neutro, erro.
   --------------------------------------------------------------------- */
.hb-state-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--hb-space-5);
  max-width: var(--hb-breakpoint-max-width-prose);
  margin: 0 auto;
}

.hb-state-tile__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--hb-size-state-tile);
  height: var(--hb-size-state-tile);
  border-radius: var(--hb-radius-tile);
  font-size: var(--hb-size-icon-tile);
}

.hb-state-tile--success .hb-state-tile__icon {
  background: var(--hb-color-success-tile);
  color: var(--hb-color-success-text);
}

.hb-state-tile--warning .hb-state-tile__icon {
  background: var(--hb-color-warning-surface);
  color: var(--hb-color-warning-text);
}

.hb-state-tile--neutral .hb-state-tile__icon {
  background: var(--hb-color-surface-soft);
  color: var(--hb-color-text-secondary);
}

.hb-state-tile--danger .hb-state-tile__icon {
  background: var(--hb-color-danger-surface);
  color: var(--hb-color-danger-text);
}

.hb-state-tile__title {
  font-family: var(--hb-typography-scale-title-font-family);
  font-size: var(--hb-typography-scale-title-font-size);
  font-weight: var(--hb-typography-scale-title-font-weight);
  letter-spacing: var(--hb-typography-scale-title-letter-spacing);
  line-height: var(--hb-typography-scale-title-line-height);
  color: var(--hb-color-text-primary);
  margin: 0;
}

.hb-state-tile__description {
  font-family: var(--hb-typography-scale-body-font-family);
  font-size: var(--hb-typography-scale-body-font-size);
  line-height: var(--hb-typography-scale-body-line-height);
  color: var(--hb-color-text-secondary);
  margin: 0;
}

/* ---------------------------------------------------------------------
   Section Header — componente-assinatura. §13.8.
   --------------------------------------------------------------------- */
.hb-section-header {
  font-family: var(--hb-typography-family-technical);
  font-size: var(--hb-typography-scale-label-large-font-size);
  font-weight: var(--hb-typography-weight-medium);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--hb-color-text-secondary);
  text-align: center;
  margin: 0;
}

/* ---------------------------------------------------------------------
   Input — underline (telas de foco: login, recuperação). §13.4.
   --------------------------------------------------------------------- */
.hb-field {
  display: flex;
  flex-direction: column;
  gap: var(--hb-space-2);
}

.hb-field__label {
  font-family: var(--hb-typography-family-technical);
  font-size: 12px;
  font-weight: var(--hb-typography-weight-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--hb-color-text-secondary);
}

.hb-input--underline {
  min-height: var(--hb-size-field-row);
  width: 100%;
  border: none;
  border-bottom: var(--hb-border-underline);
  border-radius: 0;
  background: transparent;
  padding: var(--hb-space-3) 0;
  font-family: var(--hb-typography-family-technical);
  font-size: var(--hb-typography-scale-body-font-size);
  color: var(--hb-color-text-primary);
  transition: border-color var(--hb-motion-transition-hover);
}

.hb-input--underline:hover {
  border-bottom-color: var(--hb-color-border-field-hover);
}

.hb-input--underline:disabled {
  color: var(--hb-color-text-disabled);
  border-bottom-color: var(--hb-color-border-disabled);
}

.hb-field__support {
  font-family: var(--hb-typography-scale-body-small-font-family);
  font-size: 13px;
  color: var(--hb-color-text-secondary);
}

.hb-field--error .hb-input--underline {
  border-bottom-color: var(--hb-color-danger-text);
}

.hb-field--error .hb-field__support {
  color: var(--hb-color-danger-text);
}

/* ---------------------------------------------------------------------
   Input — outlined (telas densas). §13.5.
   --------------------------------------------------------------------- */
.hb-input--outlined {
  min-height: var(--hb-size-field-row);
  width: 100%;
  border: var(--hb-border-field);
  border-radius: var(--hb-radius-control);
  background: var(--hb-color-surface);
  padding: 0 var(--hb-space-4);
  font-family: var(--hb-typography-scale-body-font-family);
  font-size: var(--hb-typography-scale-body-font-size);
  color: var(--hb-color-text-primary);
  transition: border-color var(--hb-motion-transition-hover);
}

/* Campo é a exceção da regra de superfície: hover fortalece o contorno,
   nunca preenche (§4.3 do documento de estados web). */
.hb-input--outlined:hover {
  border-color: var(--hb-color-border-field-hover);
}

.hb-input--outlined:disabled {
  background: var(--hb-color-surface-auxiliary);
  border-color: var(--hb-color-border-disabled);
  color: var(--hb-color-text-disabled);
}

.hb-field--error .hb-input--outlined {
  border-color: var(--hb-color-danger-text);
}

/* ---------------------------------------------------------------------
   Card. §13.6. Elevação 0 — superfície + fio, nunca sombra.
   --------------------------------------------------------------------- */
.hb-card {
  background: var(--hb-color-surface);
  border: var(--hb-border-hairline);
  border-radius: var(--hb-radius-container);
  padding: var(--hb-space-6);
}

/* ---------------------------------------------------------------------
   Chip / Badge. §13.7.
   --------------------------------------------------------------------- */
.hb-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--hb-space-1);
  min-height: var(--hb-size-chip-height);
  padding: var(--hb-space-2) var(--hb-space-4);
  border-radius: var(--hb-radius-pill);
  font-family: var(--hb-typography-family-technical);
  font-size: 12px;
  font-weight: var(--hb-typography-weight-medium);
  background: var(--hb-color-surface-auxiliary);
  color: var(--hb-color-text-secondary);
}

.hb-chip--success {
  background: var(--hb-color-success-surface);
  color: var(--hb-color-success-text);
}

.hb-chip--warning {
  background: var(--hb-color-warning-surface);
  color: var(--hb-color-warning-text);
}

.hb-chip--danger {
  background: var(--hb-color-danger-surface);
  color: var(--hb-color-danger-text);
}

.hb-chip__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ---------------------------------------------------------------------
   Loading. §13.12. Nunca aparece sozinho — sempre com texto.
   O giro usa duration.spin, que NÃO é zerado por reduced-motion
   (§12.4: comunica processo em curso, removê-lo tira informação).
   --------------------------------------------------------------------- */
.hb-loading {
  display: inline-flex;
  align-items: center;
  gap: var(--hb-space-3);
  font-family: var(--hb-typography-family-technical);
  font-size: 12px;
  color: var(--hb-color-text-secondary);
}

.hb-loading__ring {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--hb-color-neutral-350);
  border-top-color: var(--hb-color-text-primary);
  animation: hb-spin var(--hb-motion-duration-spin) linear infinite;
}

@keyframes hb-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------------------------------------------------------------------
   Responsive Pair. §17.4 / §8.4.
   Dois filhos de peso igual; empilha quando a largura não comporta ou
   a fonte foi ampliada — aqui expresso via container query com
   fallback de largura mínima para navegadores sem suporte.
   --------------------------------------------------------------------- */
.hb-pair {
  display: flex;
  gap: var(--hb-space-5);
  flex-wrap: wrap;
}

.hb-pair > * {
  flex: 1 1 260px;
}

/* ---------------------------------------------------------------------
   Link — HEBREUS_WEB_INTERACTION_STATES.md §Rest/§4/§6/§7.
   Único componente sem fonte mobile: tinta sublinhada, sem cor própria
   ("cor é evento"). Introduzido na Phase 2 para servir de base à
   navegação (Phase 2), que precisa de um item interativo sobre o chrome
   fixo — superfície não é opção aqui (§4.4 do documento de estados web:
   uma linha interativa direto sobre o papel/chrome não tem contraste de
   hover confiável; Link resolve isso mudando só o traço).
   --------------------------------------------------------------------- */
.hb-link {
  color: var(--hb-color-link-text);
  text-decoration: underline;
  text-decoration-color: var(--hb-color-link-underline);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--hb-motion-transition-hover);
}

.hb-link:hover {
  text-decoration-color: var(--hb-color-link-underline-hover);
}

.hb-link:active {
  color: var(--hb-color-link-pressed);
  transition: color var(--hb-motion-transition-press-in);
}