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

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* Custom Nohemi font - You'll need to add the actual font files */
@font-face {
  font-family: 'Nohemi';
  src: url("path/to/nohemi.woff2") format('woff2'),
       url("path/to/nohemi.woff") format('woff');
  font-weight: normal;
  font-style: normal;
}

@layer base {
  body {
    font-family: 'Inter', system-ui, sans-serif;
  }
}

@layer components {
  /* Cezam Branding Components */
  .gradient-text {
    background: linear-gradient(135deg, #6B8DFF 0%, #7E4EF2 50%, #7EFD94 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  .gradient-bg {
    background: linear-gradient(135deg, #6B8DFF 0%, #7E4EF2 50%, #7EFD94 100%);
  }
  
  .card-hover {
    transition: all 0.3s ease;
  }
  
  .card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  
  .color-card {
    @apply rounded-2xl p-8 text-white shadow-lg;
  }
  
  .color-card h3 {
    @apply font-nohemi font-bold text-2xl mb-4;
  }
  
  .color-card div {
    @apply text-sm space-y-2;
  }
  
  /* Navigation Components */
  .nav-link {
    @apply px-4 py-2 rounded-lg transition-all duration-200 font-medium;
  }
  
  .nav-link:hover {
    @apply bg-white bg-opacity-20;
  }
  
  .nav-link.active {
    @apply bg-white bg-opacity-30;
  }
  
  /* Button Components */
  .btn-primary {
    @apply bg-cezam-blue hover:bg-opacity-90 text-white font-semibold py-3 px-6 rounded-lg transition-all duration-200;
  }
  
  .btn-secondary {
    @apply bg-white text-cezam-blue border-2 border-cezam-blue hover:bg-cezam-blue hover:text-white font-semibold py-3 px-6 rounded-lg transition-all duration-200;
  }
  
  .btn-success {
    @apply bg-cezam-green hover:bg-opacity-90 text-black font-semibold py-3 px-6 rounded-lg transition-all duration-200;
  }
  
  .btn-purple {
    @apply bg-cezam-purple hover:bg-opacity-90 text-white font-semibold py-3 px-6 rounded-lg transition-all duration-200;
  }
  
  /* Form Components */
  .form-input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-cezam-blue focus:border-cezam-blue transition-all duration-200;
  }
  
  .form-label {
    @apply block text-sm font-medium text-gray-700 mb-2;
  }
  
  /* Journey Progress Bar */
  .progress-bar {
    @apply w-full bg-gray-200 rounded-full h-2 mb-6;
  }
  
  .progress-fill {
    @apply bg-gradient-cezam h-2 rounded-full transition-all duration-300;
  }
  
  /* Star decoration */
  .star-decoration {
    @apply text-cezam-green;
  }
  
  /* Journey Cards */
  .journey-card {
    @apply bg-white rounded-2xl p-8 shadow-lg border-2 border-transparent hover:border-cezam-blue transition-all duration-300;
  }
  
  .journey-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  }
  
  /* Navigation Breadcrumbs */
  .breadcrumb {
    @apply flex items-center space-x-2 text-sm text-gray-600 mb-6;
  }
  
  .breadcrumb-item {
    @apply hover:text-cezam-blue transition-colors duration-200;
  }
  
  .breadcrumb-separator {
    @apply text-gray-400;
  }
  
  /* Status badges */
  .status-badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium;
  }
  
  .status-active {
    @apply bg-cezam-green bg-opacity-20 text-green-800;
  }
  
  .status-pending {
    @apply bg-yellow-100 text-yellow-800;
  }
  
  .status-inactive {
    @apply bg-gray-100 text-gray-800;
  }
  
  /* QR Code styling */
  .qr-code-container {
    @apply bg-white p-8 rounded-2xl shadow-lg border-2 border-cezam-blue;
  }
  
  /* Gift card styling */
  .gift-card {
    @apply bg-gradient-cezam rounded-2xl p-8 text-white shadow-xl;
  }
  
  /* Mobile-friendly scanner */
  .scanner-interface {
    @apply bg-black rounded-2xl p-6 text-white relative overflow-hidden;
  }
  
  .scanner-frame {
    @apply border-2 border-cezam-green rounded-lg;
  }
}