@import "tailwindcss";

html {
  scroll-behavior: smooth;
}

@theme {
  --font-sans: var(--font-inter), sans-serif;
  --font-serif: var(--font-cormorant), serif;
  
  --color-brand-black: #0A0A0A;
  --color-brand-beige: #F8F7F2;
  --color-brand-gold: #D4AF37;
  --color-brand-charcoal: #1A1A1A;
  
  --animate-fade-in: fade-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  --animate-slide-up: slide-up 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  --animate-draw-line: draw-line 1.5s cubic-bezier(0.85, 0, 0.15, 1) forwards;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slide-up {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes draw-line {
  from { width: 0%; }
  to { width: 100%; }
}

/* Custom Webkit scrollbar for editorial styling */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: #F8F7F2;
}

::-webkit-scrollbar-thumb {
  background: #1A1A1A;
}

::-webkit-scrollbar-thumb:hover {
  background: #D4AF37;
}

/* Custom utility classes */
.border-grid {
  border-color: rgba(26, 26, 26, 0.08);
}

.dark .border-grid {
  border-color: rgba(248, 247, 242, 0.1);
}

.text-stroke {
  -webkit-text-stroke: 1px #1A1A1A;
  color: transparent;
}

.dark .text-stroke {
  -webkit-text-stroke: 1px #F8F7F2;
  color: transparent;
}