/* CSS Custom Properties mapped from original tailwind config */
:root {
  --background: 0 0% 98%;
  --foreground: 0 0% 8%;

  --card: 0 0% 100%;
  --card-foreground: 0 0% 8%;

  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 8%;

  --primary: 0 0% 5%;
  --primary-foreground: 45 60% 60%;

  --secondary: 0 0% 95%;
  --secondary-foreground: 0 0% 8%;

  --muted: 0 0% 94%;
  --muted-foreground: 0 0% 40%;

  --accent: 43 72% 52%;
  --accent-foreground: 0 0% 5%;

  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;

  --border: 0 0% 90%;
  --input: 0 0% 90%;
  --ring: 43 72% 52%;

  --radius: 0.5rem;

  --gold: 43 72% 52%;
  --gold-light: 43 72% 70%;
  --gold-dark: 43 72% 38%;
  --surface: 0 0% 96%;
  --surface-dark: 0 0% 8%;
  --surface-dark-foreground: 0 0% 92%;

  --font-display: 'Playfair Display', serif;
  --font-body: 'Inter', sans-serif;
}

* {
  border-color: hsl(var(--border) / 1);
}

body {
  background-color: hsl(var(--background) / 1);
  color: hsl(var(--foreground) / 1);
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
}

/* Utilities */
.text-gold-gradient {
  background: linear-gradient(135deg, hsl(43 72% 52%), hsl(43 72% 70%), hsl(43 72% 52%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bg-dark-section {
  background-color: hsl(var(--surface-dark));
  color: hsl(var(--surface-dark-foreground));
}

.gold-border {
  border-color: hsl(var(--gold));
}

.gold-divider {
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, hsl(var(--gold)), hsl(var(--gold-light)));
}

html {
  scroll-behavior: smooth;
}

/* Scroll Animation Classes */
.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-up.in-view {
  opacity: 1;
  transform: translateY(0);
}

.fade-in {
  opacity: 0;
  transition: opacity 0.6s ease-out;
}

.fade-in.in-view {
  opacity: 1;
}

.slide-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.slide-left.in-view {
  opacity: 1;
  transform: translateX(0);
}

.slide-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.slide-right.in-view {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger transitions automatically based on nth-child or data-delay */
[data-delay="1"] { transition-delay: 0.1s; }
[data-delay="2"] { transition-delay: 0.2s; }
[data-delay="3"] { transition-delay: 0.3s; }
[data-delay="4"] { transition-delay: 0.4s; }
[data-delay="5"] { transition-delay: 0.5s; }
[data-delay="6"] { transition-delay: 0.6s; }
[data-delay="7"] { transition-delay: 0.7s; }
[data-delay="8"] { transition-delay: 0.8s; }