/* ============================================================
   FELIX AI LABS — Component styles
   Requires colors_and_type.css. Import after it.
   ============================================================ */

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-weight: 600; font-size: 15px;
  border-radius: var(--r-pill); border: 1px solid transparent;
  padding: 12px 22px; cursor: pointer; text-decoration: none;
  transition: transform .12s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn:active { transform: scale(.98); }

.btn-primary { background: var(--amber); color: var(--fg-on-accent); box-shadow: var(--glow-amber); }
.btn-primary:hover { background: var(--amber-300); }

.btn-secondary { background: var(--surface-2); color: var(--fg); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--surface-3); border-color: var(--fg-muted); }

.btn-ghost { background: transparent; color: var(--fg-dim); }
.btn-ghost:hover { color: var(--fg); background: var(--surface-1); }

.btn-sm { padding: 8px 16px; font-size: 14px; }

/* ---------- PILLS / BADGES ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 6px 12px; border-radius: var(--r-pill);
  background: rgba(139,92,246,.12); color: var(--purple-300);
  border: 1px solid rgba(139,92,246,.30);
}
.pill-amber { background: rgba(245,158,11,.12); color: var(--amber-300); border-color: rgba(245,158,11,.30); }
.pill-blue  { background: rgba(59,130,246,.12); color: var(--blue-300);  border-color: rgba(59,130,246,.30); }
.pill-green { background: rgba(34,197,94,.12);  color: var(--green-300);  border-color: rgba(34,197,94,.30); }

/* ---------- LIVE STATUS DOT (brand signature) ---------- */
.live-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--green); box-shadow: var(--glow-green);
  animation: felix-pulse 2.2s ease-in-out infinite;
}
@keyframes felix-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); opacity: 1; }
  50%      { box-shadow: 0 0 0 6px rgba(34,197,94,0);  opacity: .75; }
}

/* ---------- CARDS ---------- */
.card {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: var(--sp-5);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.card:hover { background: var(--surface-2); border-color: var(--border-strong); }

.card-featured {
  border-color: var(--border-amber);
  box-shadow: var(--glow-amber);
}

/* ---------- INPUTS ---------- */
.field {
  width: 100%; font-family: var(--font-sans); font-size: 15px; color: var(--fg);
  background: var(--surface-3); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 12px 14px; outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field::placeholder { color: var(--fg-muted); }
.field:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59,130,246,.25); }