/* Custom CSS Variables */
:root {
  /* Typography */
  --font-inter: "Inter", sans-serif;
  --font-poppins: "Poppins", sans-serif;
  /* Colors */
  --color-primary: #553221;
  --color-secondary: #ffac1d;
  --color-warning-light: rgba(255, 172, 29, 0.5);
  --color-dark-brown: #271912;
  --color-gradient-brown: linear-gradient(
    180deg,
    rgba(107, 63, 42, 1) 0%,
    rgba(85, 50, 33, 1) 42%,
    rgba(42, 25, 16, 1) 77%,
    rgba(32, 18, 12, 1) 100%
  );
  --color-gradient-contact: linear-gradient(
    180deg,
    rgba(85, 50, 33, 1) 17%,
    rgba(39, 25, 18, 1) 100%
  );
  --color-hero-overlay: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0.5) 100%
  );
  /* Spacing */
  --section-padding: 7rem;
}

/* Global Styles */
body {
  font-family: var(--font-inter);
  line-height: 1.6;
}

/* Typography */
.hero-title {
  font-family: var(--font-poppins);
  font-size: 4.5rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.72px;
}

.section-title {
  font-family: var(--font-poppins);
  font-size: 3.25rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.52px;
}

.section-tagline {
  font-family: var(--font-inter);
  font-size: 1rem;
  font-weight: 600;
  color: #090202;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.section-description {
  font-size: 1.125rem;
  line-height: 1.5;
  max-width: 768px;
  margin: 0 auto;
}

.feature-title {
  font-family: var(--font-poppins);
  font-size: 2.25rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.36px;
  color: #090202;
}

.feature-description {
  font-size: 1rem;
  line-height: 1.5;
  color: #090202;
}

.spice-name {
  font-family: var(--font-poppins);
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.28px;
  color: #090202;
}

/* Custom Button Styles */
.btn-warning {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: #090202;
  font-weight: 500;
  padding: 0.625rem 1.5rem;
  border-radius: 0.75rem;
  transition: all 0.3s ease;
}

.btn-warning:hover {
  background-color: #e6971a;
  border-color: #e6971a;
  color: #090202;
}

.btn-warning-light {
  background-color: var(--color-warning-light);
  border: 1px solid transparent;
  color: #090202;
  font-weight: 500;
  padding: 0.625rem 1.5rem;
  border-radius: 0.75rem;
  transition: all 0.3s ease;
}

.btn-warning-light:hover {
  background-color: var(--color-secondary);
  color: #090202;
}

.btn-outline-light {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid transparent;
  color: white;
  font-weight: 500;
  padding: 0.625rem 1.5rem;
  border-radius: 0.75rem;
  transition: all 0.3s ease;
}

.btn-outline-light:hover {
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
}

.btn-outline-dark {
  background-color: transparent;
  border: 1px solid transparent;
  color: #090202;
  font-weight: 500;
  padding: 0.625rem 1.5rem;
  border-radius: 0.75rem;
  transition: all 0.3s ease;
}

.btn-outline-dark:hover {
  background-color: rgba(0, 0, 0, 0.1);
  color: #090202;
}

/* Utility Classes */
.gap-3 {
  gap: 1rem !important;
}

.gap-4 {
  gap: 1.5rem !important;
}

/* Animation Classes */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}