:root {
  --cream: #F9F6F1;
  --champagne: #B8956A;
  --champagne-light: #E8D5B0;
  --champagne-pale: #F4EDE0;
  --terracotta: #C07861;
  --sage: #8A9E8A;
  --sage-light: #C8D9C8;
  --charcoal: #1C1917;
  --warm-gray: #7A7168;
  --warm-mid: #A39990;
}

html { scroll-behavior: smooth; }

body {
  background-color: var(--cream);
  color: var(--charcoal);
  font-family: 'DM Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.font-cormorant { font-family: 'Cormorant Garamond', Georgia, serif; }
.font-dm        { font-family: 'DM Sans', system-ui, sans-serif; }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: var(--champagne); border-radius: 2px; }

.section-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--champagne);
}

.section-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  line-height: 1.1;
}

.btn-primary {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background-color: var(--champagne);
  color: var(--cream);
  padding: 1rem 2rem;
  display: inline-block;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}
.btn-primary:hover { background-color: var(--charcoal); }

.btn-outline {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1px solid var(--champagne);
  color: var(--champagne);
  padding: 1rem 2rem;
  display: inline-block;
  transition: all 0.3s ease;
  background: transparent;
  cursor: pointer;
}
.btn-outline:hover {
  background-color: var(--champagne);
  color: var(--cream);
}

.gold-line {
  width: 4rem;
  height: 1px;
  background-color: var(--champagne);
  display: block;
}

@keyframes shimmer {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}
.animate-shimmer { animation: shimmer 3s ease-in-out infinite; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

.card-hover { transition: transform 0.4s ease, box-shadow 0.4s ease; }
.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(184, 149, 106, 0.15);
}

.section-number {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 8rem;
  font-weight: 300;
  color: var(--champagne-light);
  line-height: 1;
  position: absolute;
  top: -2rem;
  right: 2rem;
  pointer-events: none;
  user-select: none;
}
@media (max-width: 768px) {
  .section-number { font-size: 5rem; }
}