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

* { box-sizing: border-box; }

body {
  font-family: 'Inter', sans-serif;
  background-color: #F5F5F3;
  color: #2D2D2D;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.font-display { font-family: 'Montserrat', sans-serif; }
.font-mono { font-family: 'JetBrains Mono', monospace; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #F5F5F3; }
::-webkit-scrollbar-thumb { background: #BFBFBF; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #2D2D2D; }


.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.animate-spin-slow {
  animation: spin 8s linear infinite;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes slideOutRight {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}

.drawer-enter { animation: slideInRight 0.3s ease-out; }
.drawer-exit { animation: slideOutRight 0.3s ease-in; }

.modal-fade-in { animation: fadeIn 0.3s ease-out; }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: #BFBFBF;
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: #C19A6B;
  cursor: pointer;
}

#checkout-success-popup, #space-planner-modal {
  z-index: 9999;
}