/* ==========================================================================
   Componentes do Marco 1 Design System, portados de JSX (React) para CSS
   estático — Button, Card, Tag, Input. Ver _ds_bundle.js no projeto de
   design de origem para a versão React original.
   ========================================================================== */

/* ---------- Button ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  height:52px; padding:0 24px; border-radius:12px;
  font-family:var(--font-body); font-size:15px; font-weight:600; letter-spacing:var(--tracking-body);
  cursor:pointer; border:1px solid transparent;
  transition:all var(--motion-fast) var(--ease-premium);
  white-space:nowrap; text-decoration:none;
}
.btn[disabled]{opacity:.45; cursor:not-allowed}
.btn-sm{height:44px; padding:0 20px}
.btn-primary{background:var(--brand-teal-700); color:#fff}
.btn-primary:hover{background:var(--brand-teal-600); color:#fff}
.btn-secondary{background:transparent; color:var(--text-primary); border-color:var(--border-light)}
.btn-secondary:hover{color:var(--text-primary)}
.btn-ghost{background:transparent; color:var(--brand-teal-600); padding:0 4px; height:auto}
.btn-inverse{background:#fff; color:var(--brand-navy-950)}
.btn-block{width:100%; justify-content:center}
.btn .btn-arrow{display:inline-flex; transition:transform var(--motion-fast) var(--ease-premium)}
.btn:hover .btn-arrow{transform:translateX(4px)}

/* ---------- Card ---------- */
.card{
  background:var(--surface-white); border:1px solid rgba(20,25,29,.08);
  border-radius:24px; padding:32px; color:var(--text-primary);
  transition:transform var(--motion-fast) var(--ease-premium);
}
.card:hover{transform:translateY(-3px)}
.card-sm{border-radius:16px; padding:24px}
.card-dark{background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.10); color:var(--text-inverse)}

/* ---------- Tag ---------- */
.tag{
  display:inline-flex; align-items:center; padding:6px 14px; border-radius:999px;
  font-size:12px; font-weight:600; letter-spacing:.02em;
  background:var(--surface-soft); color:var(--text-secondary);
}
.tag-teal{background:rgba(11,89,103,.08); color:var(--brand-teal-700)}
.tag-dark{background:rgba(255,255,255,.08); color:#fff}

/* ---------- Input ---------- */
.field{display:flex; flex-direction:column; gap:8px; font-family:var(--font-body)}
.field-label{font-size:13px; font-weight:600; color:var(--text-secondary)}
.field-input{
  height:48px; border-radius:12px; border:1px solid var(--border-light);
  background:var(--surface-white); padding:0 16px; font-size:15px; color:var(--text-primary);
  outline:none; transition:border-color var(--motion-fast) var(--ease-premium);
  font-family:var(--font-body);
}
.field-input:focus{border-color:var(--brand-teal-600)}