input.css

@import "tailwindcss";

@theme {
  /* Premium Primary Color (Vibrant Blue) */
  --color-primary: #0052ff;
  --color-primary-hover: #0040cc;
  --color-primary-50: #f0f5ff;
  --color-primary-100: #e0ebff;

  /* Premium Soft Shadows */
  --shadow-soft: 0 10px 40px -10px rgba(0, 0, 0, 0.06);
  --shadow-softer: 0 4px 20px -5px rgba(0, 0, 0, 0.04);
  --shadow-glow: 0 0 24px -4px rgba(0, 82, 255, 0.3);
  --shadow-inner-soft: inset 0 2px 4px 0 rgba(0, 0, 0, 0.02);

  /* Typography */
  --font-sans: "Inter", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Animation definitions */
  --animate-modal-in: modalIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  --animate-modal-overlay: modalOverlay 0.3s ease-out forwards;
  --animate-toast-in: toastIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  --animate-toast-out: toastOut 0.4s ease-in forwards;
  --animate-glow-pulse: glowPulse 3s ease-in-out infinite;
  --animate-fade-in: fadeIn 0.4s ease-out forwards;
  --animate-slide-up: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  --animate-block-enter: blockEnter 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  --animate-float: float 8s ease-in-out infinite;
  --animate-success-flash: successFlash 0.8s ease-out;
  --animate-ripple: ripple 0.8s ease-out;
}

/* 1. Explicitly specify target files for class name extraction */
@source "./index.html";
@source "../footer.js";

/* --- Custom Keyframe Definitions --- */

/* Modal entrance animation */
@keyframes modalIn {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Modal overlay fade-in */
@keyframes modalOverlay {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Toast notification slide-in */
@keyframes toastIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -12px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

/* Toast notification fade-out */
@keyframes toastOut {
  0% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -12px) scale(0.95);
  }
}

/* Entrance animation for added blocks */
@keyframes blockEnter {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Glow pulse effect */
@keyframes glowPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(0, 82, 255, 0);
  }
  50% {
    box-shadow: 0 0 24px 8px rgba(0, 82, 255, 0.15);
  }
}

/* Fade-in animation */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Slide-up animation */
@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Floating animation (for empty state icons) */
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Success flash (on input completion) */
@keyframes successFlash {
  0% {
    background-color: rgba(16, 185, 129, 0.15);
  }
  100% {
    background-color: transparent;
  }
}

/* Ripple effect */
@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 0.5;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

/* Toast progress bar */
@keyframes toastProgress {
  0% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}

/* --- Utility Layer Extensions --- */
@utility scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }
}

/* --- Custom Styles --- */

/* Utilities for modal animations */
@utility animate-modal-in {
  animation: var(--animate-modal-in);
}

@utility animate-modal-overlay {
  animation: var(--animate-modal-overlay);
}

@utility animate-toast-in {
  animation: var(--animate-toast-in);
}

@utility animate-toast-out {
  animation: var(--animate-toast-out);
}

@utility animate-block-enter {
  animation: var(--animate-block-enter);
}

@utility animate-float {
  animation: var(--animate-float);
}

@utility animate-fade-in {
  animation: var(--animate-fade-in);
}

@utility animate-glow-pulse {
  animation: var(--animate-glow-pulse);
}

@layer base {
  /* Restore button cursor: pointer removed in Tailwind v4 */
  button, [role="button"] {
    cursor: pointer;
  }
  button:disabled, [role="button"]:disabled {
    cursor: not-allowed;
  }

  /* Unified focus ring style */
  :focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 4px;
  }

  /* Hide delete button for "last row" in detail modal */
  #detail-phones > div:only-child > button,
  #detail-emails > div:only-child > button {
    display: none;
  }
}