/* ==========================================================================
   ui.css — Elementos de interface GLOBAIS reutilizados por vários módulos
   --------------------------------------------------------------------------
   Prefixo .tp-ds-  (ds = Dataservices)
   Só entra aqui o que se repete em 2+ módulos. O resto fica no módulo.
   ========================================================================== */

/* ---------- Botão (pill) ----------
   Markup:
   <a class="tp-ds-btn tp-ds-btn--primary" href="#">
     <span class="tp-ds-btn__label">Let's talk</span>
     <span class="tp-ds-btn__icon" aria-hidden="true"><svg …></svg></span>   (opcional)
   </a>

   Variações: --primary (fundo claro), --ghost (transparente), --icon (redondo, só ícone).
   Hover: comportamento ainda NÃO definido (não reproduzir o .tp-btn do site atual). */
.tp-ds-btn {
  --btn-height: 3.5rem;          /* 56px */
  --btn-min-width: 7.5rem;       /* 120px */
  --btn-padding-x: var(--tp-ds-space-4);
  --btn-gap: var(--tp-ds-space-2);
  --btn-icon-size: 1.5rem;       /* 24px */
  --btn-font-size: var(--tp-ds-fs-body-md);
  --btn-line-height: var(--tp-ds-lh-body-md);
  --btn-bg: transparent;
  --btn-color: var(--tp-ds-title-inverse);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  height: var(--btn-height);
  min-width: var(--btn-min-width);
  padding: var(--tp-ds-space-2) var(--btn-padding-x);
  border: 0;
  border-radius: var(--tp-ds-radius-pill);
  background-color: var(--btn-bg);
  color: var(--btn-color);
  font-family: var(--tp-ds-font-family-base);
  font-size: var(--btn-font-size);
  font-weight: normal;
  line-height: var(--btn-line-height);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}

.tp-ds-btn:hover,
.tp-ds-btn:focus-visible {
  color: var(--btn-color); /* neutraliza o hover global de links */
}

.tp-ds-btn__icon {
  display: inline-flex;
  flex: none;
  width: var(--btn-icon-size);
  height: var(--btn-icon-size);
}

/* Ícone ocupa a caixa inteira (svg inline ou <img>), para ficar centralizado quando --btn-icon-size muda */
.tp-ds-btn__icon svg,
.tp-ds-btn__icon img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Variações */
.tp-ds-btn--primary {
  --btn-bg: var(--tp-ds-bg-default);
  --btn-color: var(--tp-ds-title-default);
}

.tp-ds-btn--ghost {
  --btn-bg: transparent;
  --btn-color: var(--tp-ds-title-inverse);
}

.tp-ds-btn--icon {
  --btn-height: 4rem;            /* 64px */
  --btn-min-width: 4rem;
  --btn-padding-x: 0;
  --btn-icon-size: 2.25rem;      /* ~36px */
  --btn-bg: var(--tp-ds-bg-neutral-dark);
  --btn-color: var(--tp-ds-icon-inverse);

  width: var(--btn-height);
}

/* ---------- Tag label ----------
   Linha de 30,5px + texto 16/14 Light em caixa alta (Figma "TAG LABEL").
   <p class="tp-ds-tag">Tag label</p> */
.tp-ds-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.6438rem;                /* 10,3 */
  margin: 0;
  font-family: var(--tp-ds-font-light);
  font-size: 1rem;               /* 16 */
  line-height: 0.875rem;         /* 14 */
  text-transform: uppercase;
  color: var(--tp-ds-title-inverse);
}

.tp-ds-tag::before {
  content: "";
  flex: none;
  width: 1.908rem;               /* 30,5 */
  height: 1px;
  background-color: currentColor;
}

/* Estados */
.tp-ds-btn:disabled,
.tp-ds-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}