/* ════════════════════════════════════════════════════════════
   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: var(--text-on-dark); 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: var(--danger); border-color: var(--danger-light); }
.btn-danger:hover { background: var(--danger-bg); border-color: var(--danger); }

/* ──────────── 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: var(--color-surface);
  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: var(--text-on-dark);
  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); }