/* Shared Variables & Base Styles */
:root {
  --gold: #D4AF37;
  --gold-dark: #b58f2a;
  --black: #0b0b0b;
  --gray-100: #f1f1f1;
  --gray-200: #cfcfcf;
  --gray-400: #9a9a9a;
  --gray-600: #6a6a6a;
  --gray-800: #2a2a2a;
  --white-soft: rgba(255, 255, 255, 0.9);
  --white-muted: rgba(255, 255, 255, 0.75);
}

html, body {
  height: 100%;
  background: var(--black);
  color: var(--white-soft);
  font-family: 'Montserrat', sans-serif;
  margin: 0;
  scroll-behavior: smooth;
}

a {
  color: var(--gold);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--gold-dark);
}

.brand-title {
  font-family: 'Playfair Display', serif;
  font-weight: 100;
  color: var(--gold);
  letter-spacing: 0.3px;
  font-size: 2.5rem;
  text-transform: uppercase;
}

.btn {
  border-radius: 8px;
  transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-gold {
  background: var(--gold);
  color: #000;
  border: 2px solid var(--gold);
}

.btn-gold:hover {
  background: var(--gold-dark);
  border-color: var(--gold-dark);
  color: #000;
}