@import "tailwindcss";

@theme {
  --font-sans: var(--font-oswald), ui-sans-serif, system-ui;
  --font-serif: var(--font-playfair), ui-serif, Georgia;
  
  --color-gold: #C5A059;
  --color-gold-dark: #A67C00;
  --color-bodrum-blue: #002B45;
  --color-sand: #FAF9F6;
  
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
}

@layer base {
  :root {
    --background: #ffffff;
    --foreground: #111111;
  }

  body {
    background-color: var(--background);
    color: var(--foreground);
    font-feature-settings: "ss01", "ss02", "cv01", "cv02";
  }
}

@layer components {
  .glass {
    @apply bg-white/70 backdrop-blur-md border border-white/20;
  }
  
  .glass-dark {
    @apply bg-black/50 backdrop-blur-md border border-white/10;
  }

  .btn-primary {
    @apply px-6 py-3 bg-gold text-white rounded-full font-medium transition-all hover:bg-gold-dark hover:scale-105 active:scale-95 shadow-lg shadow-gold/10;
  }

  .section-padding {
    @apply py-20 px-6 md:px-12 lg:px-24;
  }
}

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

.animate-fade-in-up {
  animation: fade-in-up 0.8s ease-out forwards;
}

.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }

/* Portrait Card Aspect Ratio */
.aspect-portrait {
  aspect-ratio: 3 / 4;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}