/* Main CSS styles for the NOVA e-commerce application */

@font-face {
  font-family: 'Varino';
  src: url('/static/fonts/Varino - Normal.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Android';
  src: url('/static/fonts/Android.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Techno';
  src: url('/static/fonts/Aliment-Black.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Typography */
body {
  font-family: 'Poppins', sans-serif;
  color: var(--primary-700);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
}

/* Custom utility classes */
.font-display {
  font-family: 'Sora', sans-serif;
}

.font-body {
  font-family: 'Poppins', sans-serif;
}

.font-alt {
  font-family: 'Inter', sans-serif;
}

/* Header styles */
.header-logo img {
  transition: transform 0.3s ease;
}

.header-logo:hover img {
  transform: scale(1.05);
}

/* Card styles */
.rounded-lg-xl {
  border-radius: 1rem;
}

.shadow-elevated-md {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Animations */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* Scrollbar hiding */
.scrollbar-hide {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;  /* Chrome, Safari and Opera */
}

/* Form elements */
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent-400);
  box-shadow: 0 0 0 3px rgba(var(--accent-400-rgb), 0.2);
}

/* Button effects */
.hover-lift {
  transition: transform 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-3px);
}

/* Custom card effects */
.product-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

/* Utility classes */
.text-gradient {
  background: linear-gradient(90deg, var(--primary-600), var(--accent-500));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}