@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --background: hsl(24, 15%, 3%);
  --foreground: hsl(43, 70%, 90%);
  --card: hsl(24, 20%, 7%);
  --card-foreground: hsl(43, 70%, 90%);
  --primary: hsl(42, 74%, 54%);
  --primary-foreground: hsl(24, 15%, 3%);
  --secondary: hsl(24, 20%, 12%);
  --secondary-foreground: hsl(43, 70%, 85%);
  --muted: hsl(24, 15%, 15%);
  --muted-foreground: hsl(30, 15%, 55%);
  --accent: hsl(36, 87%, 44%);
  --destructive: hsl(0, 84.2%, 60.2%);
  --destructive-foreground: hsl(210, 40%, 98%);
  --border: hsl(24, 20%, 16%);
  --gold-start: hsl(42, 74%, 54%);
  --gold-end: hsl(36, 87%, 44%);
  --radius: 0.5rem;
}

*, *::before, *::after { box-sizing: border-box; border-color: var(--border); }

body {
  margin: 0;
  background-color: var(--background);
  color: var(--foreground);
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 { font-family: 'Playfair Display', serif; }
button, input, textarea, select { font: inherit; }

/* Custom utilities */
.text-gradient-gold {
  background: linear-gradient(135deg, var(--gold-start), var(--gold-end));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bg-gradient-gold {
  background: linear-gradient(135deg, var(--gold-start), var(--gold-end));
}

.shadow-gold {
  box-shadow: 0 0 30px -5px hsl(42 74% 54% / 0.3);
}

.shadow-gold-lg {
  box-shadow: 0 0 60px -10px hsl(42 74% 54% / 0.4);
}

.glass-panel {
  background: linear-gradient(180deg, hsl(24 20% 7% / 0.94), hsl(24 20% 7% / 0.78));
  backdrop-filter: blur(18px);
}

/* Animations */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.animate-fade-up { animation: fade-up 0.7s ease-out both; }
.animate-fade-in { animation: fade-in 0.6s ease-out both; }

/* Colors as CSS vars for use with inline styles */
.bg-background  { background-color: var(--background); }
.bg-card        { background-color: var(--card); }
.bg-secondary   { background-color: var(--secondary); }
.bg-muted       { background-color: var(--muted); }
.bg-primary     { background-color: var(--primary); }

.text-foreground       { color: var(--foreground); }
.text-muted-foreground { color: var(--muted-foreground); }
.text-primary          { color: var(--primary); }
.text-primary-foreground { color: var(--primary-foreground); }
.text-destructive      { color: var(--destructive); }

.border-border    { border-color: var(--border); }
.border-primary   { border-color: var(--primary); }
.border-destructive { border-color: var(--destructive); }

/* Nav transition */
.nav-link-active  { color: var(--primary); }
.nav-link-default { color: var(--muted-foreground); }
.nav-link-default:hover { color: var(--foreground); }

/* Slide-fade for mobile menu */
@keyframes slide-fade {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.slide-fade-enter { animation: slide-fade 0.2s ease-out both; }