@import "tailwindcss";

@theme {
  --color-brand-blue: #0D2C54;
  --color-brand-teal: #00A69C;
  --color-brand-orange: #F9A826;
  --color-brand-gray: #E0E0E0;
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
}


/* Brand Content Editor input utility */
.input-sm {
  width: 100%;
  background-color: rgb(10 10 10);
  border: 1px solid rgb(38 38 38);
  border-radius: 0.5rem;
  padding: 0.375rem 0.625rem;
  font-size: 0.75rem;
  color: white;
  outline: none;
  transition: border-color 0.2s;
}
.input-sm:focus {
  border-color: rgb(139 92 246 / 0.5);
  box-shadow: 0 0 0 1px rgb(139 92 246 / 0.3);
}

/* Modal animation */
@keyframes slide-in-up {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.animate-in {
  animation: slide-in-up 0.25s ease-out;
}

/* ═══ Transition Card Preview Animations ═══ */
@keyframes fadeInCard {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideUpCard {
  from { transform: translateY(12px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes slideRightCard {
  from { transform: translateX(-12px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes typewriterCard {
  0% { opacity: 0; }
  25% { opacity: 0.3; }
  50% { opacity: 0.6; }
  75% { opacity: 0.8; }
  100% { opacity: 1; }
}
@keyframes bounceCard {
  0% { transform: translateY(8px); }
  40% { transform: translateY(-4px); }
  60% { transform: translateY(2px); }
  80% { transform: translateY(-1px); }
  100% { transform: translateY(0); }
}
@keyframes scaleCard {
  from { transform: scale(0.3); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes dipToBlackCard {
  0% { opacity: 0; }
  40% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes flashCard {
  0% { opacity: 1; filter: brightness(3); }
  40% { filter: brightness(3); }
  100% { opacity: 1; filter: brightness(1); }
}

/* ═══ Photoshop-style Checkerboard Background ═══ */
.checkerboard-bg {
  background-color: #1a1a1a;
  background-image:
    linear-gradient(45deg, #222 25%, transparent 25%),
    linear-gradient(-45deg, #222 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #222 75%),
    linear-gradient(-45deg, transparent 75%, #222 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
}

/* Drop zone highlight */
.drop-zone-active {
  outline: 2px dashed rgb(139 92 246 / 0.6);
  outline-offset: -2px;
  background-color: rgb(139 92 246 / 0.05) !important;
}
