:root {
  --navy: #1e3a5f;
  --lime: #8bc34a;
  --lime-opacity: rgba(139,195,74,0.9);
}

/* Layout & colors */
.bg-lime-opacity {background-color: var(--lime-opacity);}
.bg-navy { background-color: var(--navy); }
  .bg-lime { background-color: var(--lime); }
  .text-navy { color: var(--navy); }
  .text-lime { color: var(--lime); }
  .border-lime { border-color: var(--lime); }

/* Hero gradient */
.hero-gradient {
  background: linear-gradient(135deg, var(--navy) 0%, #2c5aa0 100%);
}
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }

.fade-in { 
  animation: fadeIn 1s ease-out both; 
}

/* Buttons */
.btn-primary {
  background-color: var(--lime);
  color: white;
  padding: 12px 24px;
  border-radius: 6px;
  font-weight: 600;
  transition: all 0.3s ease;
}
.btn-primary:hover {
  background-color: #7cb342;
  transform: translateY(-2px);
}

/* Product cards */
.product-card {
  transition: all 0.3s ease;
}
.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* Orb */
 .color-orb {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #ccc;
    cursor: pointer;
    transition: box-shadow 0.3s ease;
  }
  .color-orb.active {
    box-shadow: 0 0 10px 3px #32CD32;
  }
  .fade {
    transition: opacity 0.5s ease-in-out;
  }

/* Utility */
.section-padding { padding: 80px 0; }
.page-section { display: none; }
.page-section.active { display: block; }