/* ============================================================
   TIDAL UI KIT · CONTROLS
   Buttons, badges, pills, links, chips, icon-buttons.
   ============================================================ */

/* —— Button base ———————————————————————— */
.tdl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--tdl-space-2);
  font-family: var(--tdl-font-display); font-weight: 700;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 10px 16px; border-radius: var(--tdl-radius-md); cursor: pointer;
  border: 1px solid transparent; background: transparent; color: var(--tdl-fg);
  transition: background var(--tdl-dur-fast), border-color var(--tdl-dur-fast),
              color var(--tdl-dur-fast), opacity var(--tdl-dur-fast), transform var(--tdl-dur-fast);
  text-decoration: none; user-select: none;
}
.tdl-btn:focus-visible { outline: 2px solid var(--tdl-accent); outline-offset: 2px; }
.tdl-btn:disabled, .tdl-btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }
.tdl-btn:active:not(:disabled) { transform: translateY(1px); }

/* Variants */
.tdl-btn-primary  { background: var(--tdl-accent); color: var(--tdl-accent-fg); border-color: var(--tdl-accent); }
.tdl-btn-primary:hover:not(:disabled) { background: #ff5a1f; border-color: #ff5a1f; }

.tdl-btn-secondary { background: var(--tdl-surf-3); color: var(--tdl-fg); border-color: var(--tdl-hairline-2); }
.tdl-btn-secondary:hover:not(:disabled) { border-color: var(--tdl-hairline-3); background: var(--tdl-surf-4); }

.tdl-btn-ghost { background: transparent; color: var(--tdl-fg); border-color: var(--tdl-hairline-2); }
.tdl-btn-ghost:hover:not(:disabled) { border-color: var(--tdl-hairline-3); background: var(--tdl-surf-1); }

.tdl-btn-link { padding: 0; border: 0; color: var(--tdl-accent); letter-spacing: 0.02em; text-transform: none; font-family: var(--tdl-font-body); font-size: var(--tdl-fs-sm); font-weight: 500; }
.tdl-btn-link:hover:not(:disabled) { opacity: 0.75; }

.tdl-btn-danger { background: transparent; color: var(--tdl-neg); border-color: var(--tdl-neg); }
.tdl-btn-danger:hover:not(:disabled) { background: rgba(255,64,0,0.08); }

/* Sizes */
.tdl-btn-sm { padding: 7px 12px; font-size: 10px; }
.tdl-btn-lg { padding: 14px 22px; font-size: 12px; letter-spacing: 0.14em; }

/* Icon button */
.tdl-icon-btn {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--tdl-radius-md); border: 1px solid var(--tdl-hairline-2);
  background: var(--tdl-surf-1); color: var(--tdl-fg); cursor: pointer;
  transition: background var(--tdl-dur-fast), border-color var(--tdl-dur-fast);
}
.tdl-icon-btn:hover { background: var(--tdl-surf-2); border-color: var(--tdl-hairline-3); }

/* Button group (segmented) */
.tdl-btn-group { display: inline-flex; border: 1px solid var(--tdl-hairline-2); border-radius: var(--tdl-radius-md); overflow: hidden; background: var(--tdl-surf-1); }
.tdl-btn-group .tdl-btn { border-radius: 0; border: 0; border-right: 1px solid var(--tdl-hairline-2); background: transparent; color: var(--tdl-fg-3); }
.tdl-btn-group .tdl-btn:last-child { border-right: 0; }
.tdl-btn-group .tdl-btn.is-active { background: var(--tdl-surf-3); color: var(--tdl-fg); }

/* —— Badge ——————————————————————————— */
.tdl-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--tdl-font-display); font-weight: 900; font-size: 9px;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 3px 7px; border-radius: var(--tdl-radius-sm);
  background: var(--tdl-surf-3); color: var(--tdl-fg-3); border: 1px solid var(--tdl-hairline-2);
}
.tdl-badge-accent { background: var(--tdl-accent); color: var(--tdl-accent-fg); border-color: var(--tdl-accent); }
.tdl-badge-pos { background: rgba(149,193,31,0.12); color: var(--tdl-pos); border-color: rgba(149,193,31,0.4); }
.tdl-badge-neg { background: rgba(255,64,0,0.12); color: var(--tdl-neg); border-color: rgba(255,64,0,0.4); }
.tdl-badge-warn { background: rgba(255,176,32,0.12); color: var(--tdl-warn); border-color: rgba(255,176,32,0.4); }
.tdl-badge-info { background: rgba(80,188,189,0.12); color: var(--tdl-info); border-color: rgba(80,188,189,0.4); }

/* —— Pill (stronger) ———————————————— */
.tdl-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--tdl-font-display); font-weight: 900; font-size: 9px;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 4px 9px; border-radius: var(--tdl-radius-pill);
  border: 1px solid var(--tdl-hairline-2); color: var(--tdl-fg-3);
  background: transparent;
}
.tdl-pill .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.tdl-pill-live { color: var(--tdl-accent); border-color: var(--tdl-accent); }
.tdl-pill-live .dot { animation: tdl-blink 1.2s infinite; }
.tdl-pill-pos  { color: var(--tdl-pos); border-color: var(--tdl-pos); }
.tdl-pill-warn { color: var(--tdl-warn); border-color: var(--tdl-warn); }
.tdl-pill-neg  { color: var(--tdl-neg); border-color: var(--tdl-neg); }
@keyframes tdl-blink { 50% { opacity: 0.3; } }

/* —— Chip (filter / tag, can be selected) —— */
.tdl-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--tdl-surf-1); color: var(--tdl-fg);
  border: 1px solid var(--tdl-hairline-2); border-radius: var(--tdl-radius-pill);
  padding: 6px 12px; cursor: pointer;
  font-family: var(--tdl-font-display); font-weight: 700; font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  transition: background var(--tdl-dur-fast), border-color var(--tdl-dur-fast);
}
.tdl-chip:hover { border-color: var(--tdl-hairline-3); }
.tdl-chip.is-active { background: var(--tdl-accent); color: var(--tdl-accent-fg); border-color: var(--tdl-accent); }
.tdl-chip-close { width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; opacity: 0.7; }
.tdl-chip-close:hover { opacity: 1; }

/* —— Avatar ——————————————————————————— */
.tdl-avatar {
  width: 36px; height: 36px; border-radius: 50%; background: var(--tdl-surf-3);
  border: 1px solid var(--tdl-hairline-2); display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--tdl-font-display); font-weight: 900; font-size: 12px; letter-spacing: 0.04em;
  color: var(--tdl-fg); text-transform: uppercase; overflow: hidden;
}
.tdl-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tdl-avatar-sm { width: 24px; height: 24px; font-size: 10px; }
.tdl-avatar-lg { width: 48px; height: 48px; font-size: 14px; }
.tdl-avatar-stack { display: inline-flex; }
.tdl-avatar-stack .tdl-avatar { margin-left: -8px; box-shadow: 0 0 0 2px var(--tdl-bg); }
.tdl-avatar-stack .tdl-avatar:first-child { margin-left: 0; }