/* ============================================================================
   NOVA PRATA — components.css
   Reusable UI primitives built on colors_and_type.css tokens.
   Load AFTER colors_and_type.css.
   ============================================================================ */

/* ---------- Buttons ---------- */
.np-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--font-body);font-weight:var(--fw-semibold);font-size:var(--fs-small);
  letter-spacing:.01em;line-height:1;cursor:pointer;border:1px solid transparent;
  padding:.75rem 1.4rem;border-radius:var(--radius-sm);
  transition:background var(--dur-fast) var(--ease-standard),
             color var(--dur-fast) var(--ease-standard),
             border-color var(--dur-fast) var(--ease-standard),
             transform var(--dur-fast) var(--ease-standard);
  text-decoration:none;white-space:nowrap;
}
.np-btn:active{transform:translateY(1px)}

.np-btn--primary{background:var(--primary);color:var(--on-primary);}
.np-btn--primary:hover{background:var(--primary-hover);}
.np-btn--primary:active{background:var(--primary-press);}

.np-btn--secondary{background:transparent;color:var(--primary);border-color:var(--border-strong);}
.np-btn--secondary:hover{background:var(--surface-2);border-color:var(--primary);}

.np-btn--ghost{background:transparent;color:var(--fg);}
.np-btn--ghost:hover{background:var(--surface-2);}

.np-btn--accent{background:var(--accent);color:#fff;}
.np-btn--accent:hover{filter:brightness(1.06);}

.np-btn--lg{padding:1rem 1.9rem;font-size:var(--fs-body);}
.np-btn--sm{padding:.5rem .9rem;font-size:var(--fs-caption);}

/* ---------- Badges / chips ---------- */
.np-badge{
  display:inline-flex;align-items:center;gap:.35rem;
  font-family:var(--font-body);font-size:var(--fs-caption);font-weight:var(--fw-semibold);
  letter-spacing:.04em;text-transform:uppercase;
  padding:.3rem .6rem;border-radius:var(--radius-sm);
}
.np-badge--primary{background:var(--primary-soft);color:var(--primary);}
.np-badge--accent{background:var(--accent-soft);color:var(--accent);}
.np-badge--success{background:rgba(47,125,91,.12);color:var(--success);}
.np-badge--neutral{background:var(--surface-2);color:var(--fg-muted);}
.np-badge--outline{background:transparent;color:var(--fg-muted);border:1px solid var(--border-strong);}

.np-chip{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--font-body);font-size:var(--fs-small);font-weight:var(--fw-medium);
  padding:.45rem .9rem;border-radius:var(--radius-pill);
  background:var(--surface);border:1px solid var(--border);color:var(--fg-muted);
  cursor:pointer;transition:all var(--dur-fast) var(--ease-standard);
}
.np-chip[aria-pressed="true"],.np-chip.is-active{
  background:var(--primary);color:var(--on-primary);border-color:var(--primary);
}

/* ---------- Cards ---------- */
.np-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
  overflow:hidden;transition:box-shadow var(--dur-base) var(--ease-standard),
             transform var(--dur-base) var(--ease-standard);
}
.np-card--hover:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);}
.np-card__media{aspect-ratio:4/3;background:var(--surface-2);position:relative;}
.np-card__body{padding:var(--space-5);}

/* ---------- Form inputs ---------- */
.np-field{display:flex;flex-direction:column;gap:.4rem;}
.np-label{font-family:var(--font-body);font-size:var(--fs-small);font-weight:var(--fw-medium);color:var(--fg);}
.np-input,.np-textarea,.np-select{
  font-family:var(--font-body);font-size:var(--fs-body);color:var(--fg);
  background:var(--bg);border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);padding:.7rem .85rem;width:100%;box-sizing:border-box;
  transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard);
}
.np-input::placeholder,.np-textarea::placeholder{color:var(--fg-subtle);}
.np-input:focus,.np-textarea:focus,.np-select:focus{
  outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);
}
.np-textarea{min-height:96px;resize:vertical;}

/* ---------- Specification table ---------- */
.np-table{width:100%;border-collapse:collapse;font-family:var(--font-body);font-size:var(--fs-small);}
.np-table th,.np-table td{text-align:left;padding:.7rem 1rem;border-bottom:1px solid var(--border);}
.np-table thead th{font-weight:var(--fw-semibold);color:var(--fg-muted);
  text-transform:uppercase;letter-spacing:.06em;font-size:var(--fs-caption);background:var(--surface);}
.np-table tbody tr:hover{background:var(--surface);}

/* ---------- Logo — Conceito F · Barra / Tag (ÚNICO LOGOTIPO) ----------
   Bloco sólido único: boi branco + wordmark. A marca definitiva da Nova Prata.
   Usar .np-logo-bar em qualquer fundo claro; .np-logo-bar--inverse em fundos escuros. */
.np-logo-bar{display:inline-flex;align-items:center;gap:.65rem;background:var(--primary);
  border-radius:var(--radius-md);padding:.5rem .9rem;text-decoration:none;
  transition:background var(--dur-fast) var(--ease-standard);}
.np-logo-bar:hover{background:var(--primary-hover);}
.np-logo-bar img{height:38px;width:auto;display:block;flex:none;}
.np-logo-bar__text{display:flex;flex-direction:column;gap:.13rem;}
.np-logo-bar__word{font-family:var(--font-display);font-weight:800;font-size:1.2rem;
  color:#fff;letter-spacing:.05em;line-height:.95;white-space:nowrap;}
.np-logo-bar__sub{font-family:var(--font-body);font-weight:600;font-size:.52rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--fg-on-dark-muted);white-space:nowrap;}

/* Inverse — para fundos escuros (footer, hero): contorno em vez de bloco cheio */
.np-logo-bar--inverse{background:transparent;border:1.5px solid var(--border-inverse);}
.np-logo-bar--inverse:hover{background:rgba(255,255,255,.06);}

/* Tamanho grande — heros e aplicações nobres */
.np-logo-bar--lg{gap:.85rem;padding:.7rem 1.2rem;}
.np-logo-bar--lg img{height:54px;}
.np-logo-bar--lg .np-logo-bar__word{font-size:1.7rem;}
.np-logo-bar--lg .np-logo-bar__sub{font-size:.62rem;}

/* Compacto — barra de topo densa / mobile */
.np-logo-bar--sm{gap:.5rem;padding:.4rem .7rem;}
.np-logo-bar--sm img{height:30px;}
.np-logo-bar--sm .np-logo-bar__word{font-size:1rem;}
.np-logo-bar--sm .np-logo-bar__sub{font-size:.46rem;}

/* ---------- Section helpers ---------- */
.np-container{max-width:var(--container-max);margin:0 auto;padding-inline:var(--gutter);}
.np-section{padding-block:var(--space-9);}
.np-divider{height:1px;background:var(--border);border:0;}
.np-rule-accent{width:48px;height:3px;background:var(--accent);border-radius:2px;}