/* ════════════════════════════════════════════════════════════
   OB Studio Design System v1 - components.css
   Source : DESIGN_SYSTEM_OB_STUDIO_v1.md Partie 2
   Mission : P-TOKENS-UNIFY (chat 17)

   PÉRIMÈTRE : composants partagés admin + viewer + index
   YAGNI : seulement ce qui est réellement utilisé aujourd'hui
   ════════════════════════════════════════════════════════════ */

/* ──────────── BOUTONS ──────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-normal);
  text-decoration: none;
  user-select: none;
}

.btn-primary {
  background: var(--coral);
  color: #fff;
  border-color: var(--coral);
}
.btn-primary:hover {
  background: var(--coral-dark);
  border-color: var(--coral-dark);
}

.btn-secondary {
  background: transparent;
  color: var(--noir);
  border-color: var(--bord);
}
.btn-secondary:hover {
  background: var(--sable-light);
  border-color: var(--gris-light);
}

.btn-ghost {
  background: transparent;
  color: var(--gris);
  border-color: transparent;
}
.btn-ghost:hover {
  color: var(--noir);
  background: var(--sable-light);
}

.btn-danger {
  background: transparent;
  color: #c0392b;
  border-color: #e8b4ad;
}
.btn-danger:hover {
  background: #fdf0ee;
  border-color: #c0392b;
}

/* ──────────── BADGES ──────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-pill);
  letter-spacing: 0.02em;
}

.badge-draft     { background: #fef3c7; color: #92400e; }
.badge-published { background: #d1fae5; color: #065f46; }
.badge-archived  { background: #e5e7eb; color: #4b5563; }

/* ──────────── INPUTS ──────────── */
.input {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  color: var(--noir);
  background: #fff;
  border: 1px solid var(--bord);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-normal);
}
.input:focus {
  outline: none;
  border-color: var(--coral);
  box-shadow: 0 0 0 3px var(--coral-bg);
}

/* ──────────── TOAST ──────────── */
.toast {
  position: fixed;
  bottom: var(--sp-5);
  right: var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  background: var(--noir);
  color: #fff;
  font-size: var(--fs-md);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-toast);
  opacity: 0;
  transform: translateY(20px);
  transition: all var(--transition-normal);
}
.toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* ──────────── UTILITY ──────────── */
.text-muted    { color: var(--gris); }
.text-emphasis { color: var(--noir); font-weight: var(--fw-semibold); }