@import "tailwindcss";

@layer base {
  html {
    scroll-behavior: smooth;
    font-family: var(--font-jakarta), system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }

  h1, h2, h3, .font-serif {
    font-family: var(--font-cinzel), Georgia, serif;
  }
}

:root {
  --background: #ffffff;
  --foreground: #171717;
  --gold-primary: #c5a059;
  --gold-metallic: #d4af37;
  --gold-light: #e5c158;
  --gold-dark: #9e782f;
}

/* Metallic Gold Text Gradient */
.text-gold-gradient {
  background: linear-gradient(135deg, #f3d47c 0%, #c5a059 50%, #9e782f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bg-gold-gradient {
  background: linear-gradient(135deg, #dfb76c 0%, #c5a059 50%, #9e782f 100%);
}

.border-gold-metallic {
  border-color: #c5a059;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #111;
}
::-webkit-scrollbar-thumb {
  background: #c5a059;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #e5c158;
}

/* Animation utilities */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}