/*
 * Shared design tokens for the legacy static pages (dashboard.html,
 * index.html, chooser.html), extracted from the botui design system
 * (frontend/src/index.css) so all three surfaces read as one product.
 *
 * This file is purely additive — self-hosted fonts + a few utility classes
 * that don't exist yet in the legacy pages. It intentionally does NOT
 * redefine --dark-bg/--card-bg/--border/etc.: each legacy page still owns
 * those in its own later-loaded <style> block (same variable names, new
 * hex values) since a linked stylesheet loaded in <head> cannot win a
 * cascade fight against rules declared after it at equal specificity.
 */

@font-face {
  font-family: 'Geist';
  src: url('./fonts/Geist-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist';
  src: url('./fonts/Geist-Italic-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('./fonts/GeistMono-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

.pill-success {
  background: rgba(62, 207, 142, 0.1);
  color: #3ecf8e;
  border: 1px solid rgba(62, 207, 142, 0.3);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pill-danger {
  background: rgba(244, 63, 94, 0.1);
  color: #f43f5e;
  border: 1px solid rgba(244, 63, 94, 0.3);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pill-warning {
  background: rgba(245, 165, 36, 0.1);
  color: #f5a524;
  border: 1px solid rgba(245, 165, 36, 0.3);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pill-accent {
  background: rgba(0, 210, 255, 0.1);
  color: #00d2ff;
  border: 1px solid rgba(0, 210, 255, 0.3);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pill-muted {
  background: #16181b;
  color: #8b8f97;
  border: 1px solid #1f2125;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.dot-pulse {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  display: inline-block;
  flex-shrink: 0;
}

.dot-pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: currentColor;
  animation: dotPulse 1.6s ease-out infinite;
}

.dot-pulse-accent {
  background: #00d2ff;
  color: #00d2ff;
}

.dot-pulse-success {
  background: #3ecf8e;
  color: #3ecf8e;
}

.dot-pulse-danger {
  background: #f43f5e;
  color: #f43f5e;
}

@keyframes dotPulse {
  0% {
    transform: scale(1);
    opacity: 0.45;
  }
  80%,
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dot-pulse::after {
    animation: none;
    opacity: 0.6;
  }
}
