/* ══════════════════════════════════════════════════════════════════════
   COOPA — Componentes
   Réplica CSS dos componentes do design system (Button, Card, PillLabel,
   StatBlock, Badge). Teal é pontuação, não cor de texto sobre branco.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Button — cápsula completa ─────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-base);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
  line-height: 1.1;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.btn--sm { padding: 8px 18px;  font-size: 13px; }
.btn--md { padding: 12px 26px; font-size: 14px; }
.btn--lg { padding: 15px 34px; font-size: 16px; }

.btn--primary {
  background: var(--color-action);
  color: var(--white);
  box-shadow: var(--shadow-brand);
}
.btn--primary:hover { background: var(--color-action-hover); }

.btn--secondary { background: var(--surface-brand); color: var(--white); }
.btn--secondary:hover { background: var(--teal-600); }

.btn--ghost {
  background: transparent;
  color: var(--text-brand);
  border-color: var(--border-brand);
}
.btn--ghost:hover { background: var(--surface-brand-soft); }

.btn--quiet { background: transparent; color: var(--text-brand); }
.btn--quiet:hover { background: var(--surface-brand-soft); }

.btn--on-dark { background: var(--white); color: var(--color-action); }

/* ── Card — superfície branca, sombra suave ────────────────────────── */
.card {
  font-family: var(--font-base);
  background: var(--surface-card);
  color: var(--text-body);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.card--elevation-md { box-shadow: var(--shadow-md); }
.card--elevation-lg { box-shadow: var(--shadow-lg); }
/* Balão de fala: um canto reto (motivo da marca) */
.card--tail-br { border-radius: var(--radius-lg) var(--radius-lg) var(--radius-bubble-tail) var(--radius-lg); }
.card--tail-bl { border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-bubble-tail); }

/* ── PillLabel — eyebrow acima de títulos ──────────────────────────── */
.pill-label {
  display: inline-block;
  font-family: var(--font-base);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--text-brand);
}
.pill-label--outline {
  border: 1.5px solid var(--border-brand);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
}
.pill-label--on-dark { color: var(--white); }
.pill-label--on-dark.pill-label--outline { border-color: rgba(255, 255, 255, 0.6); }

/* ── StatBlock — número como pontuação ("600+ / 25 / #1") ──────────── */
.stat-block { font-family: var(--font-base); text-align: left; }
.stat-block__value {
  font-size: clamp(2.75rem, 5vw, 4rem);
  font-weight: var(--fw-light);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: var(--text-brand);
}
.stat-block__label {
  margin-top: 12px;
  font-size: 13px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--text-body);
}

/* ── Badge — tag cápsula, tons calmos ──────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-base);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  line-height: 1.2;
  background: var(--surface-brand-soft);
  color: var(--text-brand);
}
.badge--neutral { background: var(--warm-200); color: var(--ink-700); }
.badge--solid   { background: var(--surface-brand); color: var(--white); }