/* ============================================================
   Taste Skill — Core components
   Button, Badge, Eyebrow, Kbd. Styling references design tokens
   only; interactive states use real CSS pseudo-classes.
   ============================================================ */

/* ---------------- Button ---------------- */
.ts-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-body-sm);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  padding: 0.625rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-text);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  box-shadow: var(--shadow-xs);
  transition: var(--transition-control);
}
.ts-btn:hover { background: var(--accent-hover); }
.ts-btn:active { transform: scale(var(--press-scale)); }
.ts-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.ts-btn:disabled,
.ts-btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; box-shadow: none; }

.ts-btn--secondary {
  background: var(--bg-raised);
  color: var(--text-strong);
  border-color: var(--border-strong);
}
.ts-btn--secondary:hover { background: var(--sand-100); border-color: var(--line-heavy); }

.ts-btn--ghost {
  background: transparent;
  color: var(--text-strong);
  border-color: transparent;
  box-shadow: none;
}
.ts-btn--ghost:hover { background: var(--line-faint); }

.ts-btn--quiet {
  background: transparent;
  color: var(--text-muted);
  border-color: transparent;
  box-shadow: none;
}
.ts-btn--quiet:hover { background: var(--line-faint); color: var(--text-strong); }

.ts-btn--sm { padding: 0.4375rem 0.75rem; font-size: var(--text-micro); gap: 0.375rem; }
.ts-btn--lg { padding: 0.8125rem 1.25rem; font-size: var(--text-body); border-radius: var(--radius-md); }
.ts-btn--pill { border-radius: var(--radius-pill); }
.ts-btn--block { display: flex; width: 100%; }
.ts-btn--icon { padding: 0.5rem; aspect-ratio: 1 / 1; }
.ts-btn--icon.ts-btn--sm { padding: 0.375rem; }
.ts-btn--icon.ts-btn--lg { padding: 0.6875rem; }

.ts-btn__label { display: inline-flex; }
.ts-btn__lead { display: inline-flex; margin-left: -0.125rem; font-size: 1.05em; }
.ts-btn__lead :where(svg, i) { width: 1em; height: 1em; }

/* Button-in-button: the trailing icon lives in its own island */
.ts-btn__island {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-left: 0.125rem;
  margin-right: -0.375rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, currentColor 16%, transparent);
  font-size: 0.85em;
  transition: transform var(--dur-2) var(--ease-spring), background var(--dur-1) var(--ease-out);
}
.ts-btn--lg .ts-btn__island { width: 1.75rem; height: 1.75rem; margin-right: -0.5rem; }
.ts-btn:hover .ts-btn__island { transform: translate(2px, -1px); }

.ts-btn__spinner {
  width: 0.9em; height: 0.9em; border-radius: 50%;
  border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
  border-top-color: currentColor;
  animation: ts-spin 0.7s linear infinite;
}
@keyframes ts-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ts-btn__spinner { animation-duration: 1.4s; } }

/* ---------------- Badge / Tag ---------------- */
.ts-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: var(--weight-medium);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  padding: 0.3125rem 0.5625rem;
  border-radius: var(--radius-pill);
  background: var(--sand-100);
  color: var(--ink-600);
  border: 1px solid transparent;
  white-space: nowrap;
}
.ts-badge--sm { font-size: 0.6875rem; padding: 0.25rem 0.4375rem; }
.ts-badge--neutral { background: var(--sand-100); color: var(--ink-600); }
.ts-badge--success { background: var(--success-bg); color: var(--success-ink); }
.ts-badge--info    { background: var(--info-bg);    color: var(--info-ink); }
.ts-badge--warning { background: var(--warning-bg); color: var(--warning-ink); }
.ts-badge--danger  { background: var(--danger-bg);  color: var(--danger-ink); }
.ts-badge--strong  { background: var(--accent); color: var(--accent-text); }
.ts-badge--outline { background: transparent; border-color: var(--border-strong); color: var(--text); }
.ts-badge__dot {
  width: 0.4375rem; height: 0.4375rem; border-radius: 50%;
  background: currentColor; opacity: 0.9;
}

/* ---------------- Eyebrow ---------------- */
/* base .ts-eyebrow lives in tokens/base.css; modifiers here */
.ts-eyebrow--accent { color: var(--text-strong); }
.ts-eyebrow--marked { display: inline-flex; align-items: center; gap: 0.5rem; }
.ts-eyebrow--marked::before {
  content: ""; width: 1.25rem; height: 1px; background: var(--line-heavy);
}

/* ---------------- Kbd ---------------- */
.ts-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  padding: 0.1875rem 0.4375rem;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: var(--weight-medium);
  line-height: 1;
  color: var(--ink-600);
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-xs);
}
.ts-kbd-combo { display: inline-flex; align-items: center; gap: 0.25rem; }
.ts-kbd-plus { font-family: var(--font-mono); font-size: var(--text-micro); color: var(--text-faint); }