@import "tailwindcss";

@theme {
  --color-primary: #2563eb;
  --color-primary-50:  #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;

  --color-accent: #fbbf24;
  --color-accent-400: #fbbf24;
  --color-accent-500: #f59e0b;

  --color-success: #16a34a;
  --color-warning: #f59e0b;
  --color-danger:  #dc2626;
}

/* Toast slide-in animation used by the flash controller. */
@keyframes wc-toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes wc-toast-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(20px); }
}
.wc-toast-enter { animation: wc-toast-in 220ms ease-out forwards; }
.wc-toast-leave { animation: wc-toast-out 220ms ease-in  forwards; }

/* Spinner used by the loading-button controller. */
@keyframes wc-spin { to { transform: rotate(360deg); } }
.wc-spinner {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 9999px;
  animation: wc-spin 0.7s linear infinite;
  vertical-align: -2px;
  margin-right: 0.5rem;
}