@import "tailwindcss";

@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Space Grotesk", sans-serif;
  
  --color-gold-50: #fefce8;
  --color-gold-100: #fef9c3;
  --color-gold-200: #fef08a;
  --color-gold-300: #fde047;
  --color-gold-400: #facc15;
  --color-gold-500: #eab308;
  --color-gold-600: #ca8a04;
  --color-gold-700: #a16207;
  --color-gold-base: #c5a358;
  --color-gold-light: #f1d279;
  
  --color-dark-bg: #0a0a0a;
  --color-dark-card: #141414;
  --color-dark-border: #222222;
}

@layer base {
  html {
    scroll-behavior: smooth;
  }
  body {
    background-color: var(--color-dark-bg);
    color: #ffffff;
    font-family: var(--font-sans);
  }
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    line-height: 1.1;
  }
}

.gold-gradient {
  background: linear-gradient(135deg, var(--color-gold-base), var(--color-gold-light), var(--color-gold-base));
}

.gold-text-gradient {
  background: linear-gradient(135deg, var(--color-gold-base), var(--color-gold-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.card-hover {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
  transform: translateY(-5px);
  border-color: var(--color-gold-base);
  box-shadow: 0 10px 30px -10px rgba(197, 163, 88, 0.3);
}

.nav-link {
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -4px;
  left: 0;
  background-color: var(--color-gold-base);
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}