@import "tailwindcss";

@theme {
  --color-primary: #00a86b;
  --color-primary-dark: #0f7b3a;
  --color-surface: #f3faf5;
  --color-on-surface: #1a1c1a;
  
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-display: 'Outfit', sans-serif;
}

@layer base {
  body {
    @apply bg-[#f8fcf9] text-gray-900 font-sans text-[15px];
  }
}

@layer components {
  .m3-card {
    @apply bg-white rounded-[24px] p-5 shadow-sm border border-gray-100 transition-all duration-300;
  }
  
  .m3-button-primary {
    @apply bg-primary text-white px-5 py-2.5 rounded-full font-medium transition-all active:scale-95;
  }
}

/* Scroll Snap for Cards */
.card-container {
  @apply flex overflow-x-auto snap-x snap-mandatory gap-3 py-2 px-6;
  scrollbar-width: none;
}
.card-container::-webkit-scrollbar {
  display: none;
}
.bank-card {
  @apply min-w-[280px] h-[160px] snap-center relative overflow-hidden;
  background: linear-gradient(135deg, #00C853 0%, #0a4d2c 100%);
  color: white;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 12px 24px -8px rgba(0, 168, 107, 0.4);
}

.bank-card::before {
  content: "";
  @apply absolute top-[-50%] left-[-20%] w-[150%] h-[150%] opacity-10 pointer-events-none;
  background: radial-gradient(circle, #fff 0%, transparent 70%);
}

.card-container {
  @apply flex overflow-x-auto snap-x snap-mandatory gap-4 py-4 px-5 items-center;
  scrollbar-width: none;
  -ms-overflow-style: none;
}