/* Custom Architectural Design Styling for The Space Story */

:root {
  --limestone: #F9F8F6;
  --ecru: #F5F3EC;
  --linen: #ECE7DB;
  --sand: #E5E0D8;
  --charcoal: #1A1A17;
  --stone: #635F54;
  --brushedgold: #8E734E;
  --lightgold: #B89B6C;
  --slatebronze: #332E24;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #F5F3EC;
}
::-webkit-scrollbar-thumb {
  background: #D8D2C6;
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
  background: #8E734E;
}

/* Typography Refinements */
h1, h2, h3, h4, .font-serif {
  font-feature-settings: "liga" 1, "dlig" 1;
}

/* Range Slider Styling */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #8E734E;
  cursor: pointer;
  border: 2px solid #FFFFFF;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  transition: transform 0.15s ease-in-out;
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #8E734E;
  cursor: pointer;
  border: 2px solid #FFFFFF;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}

/* Interactive Button States for Estimator */
.tier-btn.active {
  border-color: #8E734E !important;
  background-color: #ECE7DB !important;
  box-shadow: inset 0 0 0 1px #8E734E;
}

.loc-btn.active {
  border-color: #8E734E !important;
  background-color: #ECE7DB !important;
  box-shadow: inset 0 0 0 1px #8E734E;
}

/* Architectural Grid Pattern (subtle overlay) */
.architectural-grid {
  background-size: 40px 40px;
  background-image: 
    linear-gradient(to right, rgba(229, 224, 216, 0.4) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(229, 224, 216, 0.4) 1px, transparent 1px);
}

/* Modal animation */
#projectModal.show {
  display: flex !important;
  animation: fadeIn 0.25s ease-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}