@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

@layer base {
  :root {
    /* Modern Clean E-commerce Palette */
    --background: 0 0% 100%;
    --foreground: 0 0% 13%;

    --card: 0 0% 100%;
    --card-foreground: 0 0% 13%;

    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 13%;

    /* Deep Green - Primary Brand */
    --primary: 142 45% 28%;
    --primary-foreground: 0 0% 100%;

    /* Light Gray - Secondary */
    --secondary: 0 0% 96%;
    --secondary-foreground: 0 0% 13%;

    /* Muted backgrounds */
    --muted: 0 0% 96%;
    --muted-foreground: 0 0% 45%;

    /* Gold/Amber Accent */
    --accent: 38 92% 50%;
    --accent-foreground: 0 0% 100%;

    /* Red for sales/alerts */
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    --border: 0 0% 90%;
    --input: 0 0% 90%;
    --ring: 142 45% 28%;

    --radius: 0.5rem;

    /* Custom organic colors */
    --organic-green: 142 45% 28%;
    --organic-green-light: 142 35% 45%;
    --organic-cream: 40 40% 97%;
    --organic-honey: 38 92% 50%;
    --organic-honey-dark: 35 85% 45%;
    --organic-brown: 25 35% 25%;
    --organic-sage: 142 15% 80%;
    --organic-leaf: 142 60% 40%;

    /* Modern Shadows */
    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  }

  body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: 'Plus Jakarta Sans', sans-serif;
  }
}

/* Utilities that were @applied in index.css - converted to standard CSS classes */
.product-card {
  background-color: hsl(var(--card));
  border-radius: var(--radius);
  overflow: hidden;
  transition: all 0.3s;
  box-shadow: var(--shadow-sm);
}

.product-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-0.25rem); /* -translate-y-1 */
}

.btn-modern {
  padding: 0.75rem 1.5rem;
  border-radius: 0.375rem;
  font-weight: 500;
  transition: all 0.2s;
}

.badge-sale {
  background-color: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}

.badge-new {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}

.img-zoom {
  transition: transform 0.5s ease-out;
}

.img-zoom:hover {
  transform: scale(1.1);
}

.input-modern {
  width: 100%;
  padding: 0.75rem 1rem;
  background-color: hsl(var(--secondary));
  border: 0;
  border-radius: 0.375rem;
  transition: all 0.2s;
}

.input-modern:focus {
  outline: none;
  box-shadow: 0 0 0 2px hsl(var(--primary) / 0.2);
}

.section-padding {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

@media (min-width: 768px) {
  .section-padding {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

@media (min-width: 1024px) {
  .section-padding {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

.container-wide {
  max-width: 80rem; /* 7xl */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .container-wide {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .container-wide {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Animations */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.animate-fade-up {
  animation: fadeUp 0.4s ease-out forwards;
}

.animate-scale-in {
  animation: scaleIn 0.3s ease-out forwards;
}

/* Scrollbar hide */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}