/* Quick Luxury Ride - Luxury Black & Gold Theme */

/* ============================================
   COLOR VARIABLES
   ============================================ */
:root {
  /* Primary Colors */
  --color-primary: #D4AF37; /* Golden */
  --color-primary-dark: #B5952F;
  --color-primary-light: #E8B459;
  
  /* Backgrounds */
  --bg-black: #000000;
  --bg-dark: #111827;
  --bg-gray: #F3F4F6;
  --bg-gray-light: #F9FAFB;
  --bg-gray-lighter: #FDFBF8;
  --bg-white: #FFFFFF;
  
  /* Text Colors */
  --text-white: #FFFFFF;
  --text-gray-100: #F9FAFB;
  --text-gray-200: #E5E7EB;
  --text-gray-300: #D1D5DB;
  --text-gray-400: #9CA3AF;
  --text-gray-500: #6B7280;
  --text-gray-600: #4B5563;
  --text-gray-700: #374151;
  --text-gray-800: #1F2937;
  --text-gray-900: #111827;
  
  /* Borders */
  --border-gold: #D4AF37;
  --border-gray-200: #E5E7EB;
  --border-gray-300: #D1D5DB;
  --border-gray-800: #1F2937;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
body {
  font-family: 'Tulip', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-gray-700);
}

/* Vogue Font for Headers */
h1, h2, h3, h4, h5, h6,
.font-heading, .page-title, .section-title {
  font-family: 'Vogue', serif;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Capitalized First Letters */
h1 .capitalized-first,
h2 .capitalized-first,
h3 .capitalized-first {
  text-transform: none;
  display: inline;
}

h1 .capitalized-first::first-letter,
h2 .capitalized-first::first-letter,
h3 .capitalized-first::first-letter {
  font-size: 1.2em;
  color: var(--color-primary);
  font-weight: 700;
}

/* Navigation */
.nav-golden {
  color: var(--color-primary);
}

.nav-golden:hover,
.nav-golden-active {
  background-color: var(--color-primary);
  color: var(--bg-white);
}

/* Buttons and CTAs */
.btn-golden {
  background-color: var(--color-primary);
  color: var(--bg-white);
  border-color: var(--color-primary);
  transition: all 0.3s ease;
}

.btn-golden:hover {
  background-color: var(--color-primary-dark);
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.2);
}

.btn-golden-outline {
  background-color: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  transition: all 0.3s ease;
}

.btn-golden-outline:hover {
  background-color: var(--color-primary);
  color: var(--bg-white);
}

/* Icons */
.icon-golden {
  color: var(--color-primary);
}

/* Card Hover Effects */
.card-hover-golden:hover {
  border-color: var(--color-primary);
  box-shadow: 0 4px 20px rgba(212, 175, 55, 0.15);
}

/* Focus Styles */
input:focus,
textarea:focus,
select:focus,
button:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0 4px rgba(212, 175, 55, 0.2);
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-gray);
}

::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary-dark);
}

/* Links */
a {
  color: var(--text-gray-700);
  transition: color 0.2s ease;
}

a:hover {
  color: var(--color-primary);
}

/* Mobile Menu Enhancements */
.mobile-menu-golden {
  border-left: 3px solid var(--color-primary);
  padding-left: 1rem;
}