/* ============================================================
   Components — primitivas canônicas reutilizáveis
   ------------------------------------------------------------
   Depende de: tokens.css, base.css

   Objetivo: qualquer nova UI do sistema deve ser montada a
   partir destas classes. Variantes via modifiers BEM-like:
       .btn               (base)
       .btn--primary      (variante)
       .btn--ghost
       .btn--danger

   Componentes já existentes nas páginas (.btn-primary,
   .nav-btn, .btn-ghost, etc.) continuam funcionando pelo
   seu CSS próprio — serão migrados gradualmente.
   ============================================================ */


/* ============ Buttons ============ */
.btn {
  /* Primitiva base de botão.
     Por padrão .btn usa --color-action (marrom) — não terracota.
     Terracota é detalhe; não deve fundar superfícies interativas grandes.
     Para o CTA de ênfase máxima da marca, use .btn--brand. */
  --btn-bg:        var(--color-action);
  --btn-fg:        var(--color-text-inverse);
  --btn-border:    transparent;
  --btn-shadow:    var(--shadow-md);
  --btn-bg-hover:  var(--color-action);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-pill);
  border: 1px solid var(--btn-border);
  background-color: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: var(--btn-shadow);
  cursor: pointer;
  transition: transform var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard),
              background-color var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard),
              filter var(--duration-base) var(--ease-standard);
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  filter: brightness(0.97);
}
.btn:active { transform: translateY(0); filter: brightness(0.92); }
.btn[disabled],
.btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(0.2);
}

/* Variantes */
.btn--primary   { /* default já é primary (marrom) */ }

/* Ênfase de marca — use apenas no CTA crítico do funil público
   (ex.: "Confirmar orçamento"). Evite em cadastros/admin. */
.btn--brand {
  --btn-bg:     var(--color-accent);
  --btn-fg:     var(--color-text-inverse);
  --btn-shadow: var(--shadow-md);
}

.btn--secondary {
  --btn-bg:     var(--color-accent-soft);
  --btn-fg:     var(--color-text-strong);
  --btn-shadow: var(--shadow-sm);
}

.btn--ghost {
  /* Ação secundária — usa marrom (ação), não terracota. */
  --btn-bg:     transparent;
  --btn-fg:     var(--color-action);
  --btn-border: var(--color-border-strong);
  --btn-shadow: none;
}
.btn--ghost:hover {
  --btn-bg: var(--color-action);
  --btn-fg: var(--color-text-inverse);
}

.btn--subtle {
  --btn-bg:     transparent;
  --btn-fg:     var(--color-text-muted);
  --btn-border: var(--color-border-strong);
  --btn-shadow: none;
}
.btn--subtle:hover {
  --btn-bg: var(--color-text-muted);
  --btn-fg: var(--color-text-inverse);
}

.btn--danger {
  --btn-bg:     transparent;
  --btn-fg:     var(--color-danger);
  --btn-border: rgba(183, 79, 79, 0.40);
  --btn-shadow: none;
}
.btn--danger:hover {
  --btn-bg: var(--color-danger);
  --btn-fg: var(--color-text-inverse);
}

/* Tamanhos */
.btn--sm { padding: var(--space-2) var(--space-5); font-size: var(--text-2xs); }
.btn--lg { padding: var(--space-4) var(--space-8); font-size: var(--text-sm); }

/* Botão-ícone circular */
.btn-icon {
  width: 34px; height: 34px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-strong);
  background-color: var(--color-surface-raised);
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard);
}
.btn-icon:hover {
  background-color: var(--color-accent);
  color: var(--color-text-inverse);
  border-color: var(--color-accent);
}


/* ============ Chips & Pills ============ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-strong);
  background-color: var(--color-surface-raised);
  color: var(--color-text-strong);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard);
}
.chip:hover {
  background-color: var(--color-action-tint);
  border-color: var(--color-action-soft);
}
.chip.is-active {
  /* Estado ativo usa marrom (ação) — terracota fica reservada para detalhes. */
  background-color: var(--color-action);
  color: var(--color-text-inverse);
  border-color: var(--color-action);
}

.pill {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  background-color: var(--color-border);
  color: var(--color-text-muted);
}
.pill--accent  { background-color: var(--color-accent-tint); color: var(--color-accent); }
.pill--soft    { background-color: var(--color-accent-soft); color: var(--color-text-strong); }
.pill--neutral { background-color: var(--color-border); color: var(--color-text-muted); }
.pill--danger  { background-color: var(--color-danger-tint); color: var(--color-danger); }


/* ============ Field (label + input) ============ */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.field > label,
.field-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.field .field-optional {
  text-transform: none;
  letter-spacing: var(--tracking-normal);
  font-size: var(--text-2xs);
  color: var(--color-text-soft);
  font-style: italic;
  margin-left: var(--space-1);
  font-weight: var(--weight-regular);
}

.input,
.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  color: var(--color-text-strong);
  transition: border-color var(--duration-base) var(--ease-standard),
              background-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}
.input:focus,
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  background-color: var(--color-surface-raised);
  box-shadow: var(--shadow-focus);
}


/* ============ Panel (card de seção) ============ */
.panel {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.panel-head {
  padding: var(--space-5) var(--space-6) var(--space-3);
}
.panel-head h3 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--weight-regular);
  font-size: var(--text-2xl);
  color: var(--color-text-strong);
}
.panel-foot {
  padding: var(--space-4) var(--space-6) var(--space-5);
  display: flex;
  justify-content: center;
}


/* ============ Empty state ============ */
.empty-state {
  font-family: var(--font-sans);
  color: var(--color-text-muted);
  font-style: italic;
  padding: var(--space-8);
  text-align: center;
}


/* ============ Dividers ============ */
.divider {
  height: 1px;
  background-color: var(--color-border);
  border: 0;
  margin: var(--space-6) 0;
}


/* ============ Text utilities ============ */
.text-muted   { color: var(--color-text-muted); }
.text-soft    { color: var(--color-text-soft); }
.text-accent  { color: var(--color-accent); }
.text-strong  { color: var(--color-text-strong); }
.text-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.text-italic-serif {
  font-family: var(--font-serif);
  font-style: italic;
}


/* ============ Stack / Cluster helpers ============ */
.stack        { display: flex; flex-direction: column; gap: var(--space-4); }
.stack-sm     { gap: var(--space-2); }
.stack-lg     { gap: var(--space-6); }
.cluster      { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.cluster-sm   { gap: var(--space-2); }


/* ============ Card (surface clicável) ============ */
.card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: transform var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard);
}
.card--clickable { cursor: pointer; }
.card--clickable:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-accent);
}


/* ============ Modal ============ */
.modal-root {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}
.modal-root[hidden] { display: none !important; }
.modal-root__backdrop {
  position: absolute;
  inset: 0;
  background-color: var(--color-overlay);
  backdrop-filter: blur(4px);
}
.modal-root__card {
  position: relative;
  background-color: var(--color-bg);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2xl);
  width: 100%;
  max-width: 760px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  animation: fadeInUp var(--duration-base) var(--ease-standard);
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}