yourwillyourwish/app/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --foreground-rgb: 0, 0, 0;
    --background-start-rgb: 255, 255, 255;
    --background-end-rgb: 255, 255, 255;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --foreground-rgb: 255, 255, 255;
      --background-start-rgb: 15, 23, 42;
      --background-end-rgb: 15, 23, 42;
    }
  }

  body {
    color: rgb(var(--foreground-rgb));
    background: linear-gradient(
        to bottom,
        transparent,
        rgb(var(--background-end-rgb))
      )
      rgb(var(--background-start-rgb));
  }
}

@layer components {
  /* Modern Button Styles */
  .btn-primary {
    @apply inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg font-semibold bg-gradient-to-r from-primary to-primary-dark text-white shadow-md transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed border border-primary-dark/20;
  }

  .btn-secondary {
    @apply inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg font-semibold bg-gradient-to-r from-secondary to-secondary-dark text-white shadow-md transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed border border-secondary-dark/20;
  }

  .btn-outline {
    @apply inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg font-semibold border-2 border-primary text-primary bg-white dark:bg-slate-800 transition-all duration-300 hover:bg-primary/5 dark:hover:bg-primary/10 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-ghost {
    @apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg font-medium text-gray-700 dark:text-gray-300 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-slate-700 active:scale-95 hover:-translate-y-0.5;
  }

  .btn-danger {
    @apply inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg font-semibold bg-gradient-to-r from-danger to-danger-dark text-white shadow-md transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed border border-danger-dark/20;
  }

  .btn-sm {
    @apply px-4 py-2 text-sm;
  }

  .btn-lg {
    @apply px-8 py-4 text-lg;
  }

  /* Modern Input Styles */
  .input-field {
    @apply w-full px-4 py-3 border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:border-primary focus:ring-2 focus:ring-primary/30 transition-all duration-300 outline-none shadow-sm;
  }

  .input-error {
    @apply border-danger focus:border-danger focus:ring-danger/30;
  }

  /* Modern Card Styles */
  .card {
    @apply bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-gray-200 dark:border-slate-700 transition-all duration-300 overflow-hidden;
  }

  .card:hover {
    @apply shadow-md border-gray-300 dark:border-slate-600;
  }

  .card-hover {
    @apply hover:shadow-elevation-2 hover:-translate-y-1 cursor-pointer;
  }

  /* Section Container */
  .section-container {
    @apply py-16 md:py-20 lg:py-28;
  }

  /* Badge Styles */
  .badge {
    @apply inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-semibold bg-primary/10 text-primary dark:bg-primary/20;
  }

  .badge-success {
    @apply bg-success/10 text-success dark:bg-success/20;
  }

  .badge-danger {
    @apply bg-danger/10 text-danger dark:bg-danger/20;
  }

  .badge-warning {
    @apply bg-warning/10 text-warning dark:bg-warning/20;
  }

  /* Animation Classes */
  .hover-lift {
    @apply transition-transform duration-300 hover:-translate-y-1;
  }

  .animate-float {
    animation: float 6s ease-in-out infinite;
  }

  .animate-slideDown {
    animation: slideDown 0.8s ease-out;
  }

  .animate-slideUp {
    animation: slideUp 0.8s ease-out;
  }

  .animate-fadeIn {
    animation: fadeIn 0.6s ease-out;
  }

  .animate-pulse-soft {
    animation: pulseSoft 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  /* Modern Modal Styles */
  .modal-overlay {
    @apply fixed inset-0 z-[9999] flex items-center justify-center bg-black/40 backdrop-blur-sm transition-opacity duration-300;
  }

  .modal-content {
    @apply relative z-10 w-full max-w-3xl max-h-[90vh] overflow-y-auto bg-white dark:bg-slate-800 rounded-xl shadow-2xl;
  }

  .modal-header {
    @apply flex items-center justify-between px-6 py-4 bg-gradient-to-r from-primary/5 to-secondary/5 dark:from-primary/10 dark:to-secondary/10 border-b border-gray-200 dark:border-slate-700;
  }

  .modal-title {
    @apply text-xl font-bold text-gray-900 dark:text-white;
  }

  .modal-close-btn {
    @apply inline-flex items-center justify-center w-8 h-8 rounded-lg text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-slate-700 transition-all duration-200 hover:text-gray-700 dark:hover:text-gray-200;
  }

  .modal-body {
    @apply px-6 py-6 space-y-4;
  }

  .modal-footer {
    @apply px-6 py-4 bg-gray-50 dark:bg-slate-700/50 border-t border-gray-200 dark:border-slate-700 flex gap-3 justify-end;
  }

  /* Form input improvements */
  .input {
    @apply input-field;
  }

  .input-with-icon {
    @apply relative;
  }

  .input-icon {
    @apply absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 dark:text-gray-500 text-lg;
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

@keyframes slideDown {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes pulseSoft {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* Scrollbar Styles */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  @apply bg-gray-100 dark:bg-slate-900;
}

::-webkit-scrollbar-thumb {
  @apply bg-gray-400 dark:bg-slate-600 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-gray-500 dark:bg-slate-500;
}