@import "tailwindcss";

@theme {
  --color-greige-50: #F5F3F0;
  --color-greige-100: #EFECE7;
  --color-greige-200: #E7E2DB;
  --color-greige-300: #D4CEC5;
  --color-greige-400: #B8B0A5;
  --color-greige-500: #9C9285;
  --color-greige-600: #7A7166;
  --color-greige-700: #5C554C;
  --color-greige-800: #4A443F;
  --color-greige-900: #38332F;
  
  --color-sage-50: #E8EDE9;
  --color-sage-100: #D1DBD3;
  --color-sage-200: #A3B7A7;
  --color-sage-300: #75937B;
  --color-sage-400: #4D6F53;
  --color-sage-500: #3D5A45;
  --color-sage-600: #324A39;
  --color-sage-700: #273A2D;
  --color-sage-800: #1C2A21;
  --color-sage-900: #111A14;
  
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

/* Dark mode - only when .dark class is on html */
html.dark body {
  background-color: #1f1e1c;
  color: #e7e5e4;
}

html.dark .bg-white {
  background-color: #1a1917;
}

html.dark .bg-greige-100 {
  background-color: #1f1e1c;
}

html.dark .bg-greige-200 {
  background-color: #2a2826;
}

html.dark .text-greige-800 {
  color: #e7e5e4;
}

html.dark .text-greige-900 {
  color: #f5f5f4;
}

html.dark .text-greige-700 {
  color: #d6d3d1;
}

html.dark .text-greige-600 {
  color: #a8a29e;
}

html.dark .text-greige-500 {
  color: #78716c;
}

html.dark .ring-greige-200 {
  --tw-ring-color: #3d3a37;
}

html.dark .hover\:bg-greige-200\/50:hover {
  background-color: rgba(42, 40, 38, 0.5);
}

/* Image Carousel with Scale Effect */
.carousel-track {
  will-change: transform;
}

.carousel-card {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  transition: transform 0.6s ease-out, opacity 0.6s ease-out;
  transform-origin: center center;
}

/* Fade edges for carousel */
[data-controller="scale-carousel"] > div:first-child {
  mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

/* Typewriter effect */
@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.typewriter-cursor {
  animation: blink 1s infinite;
  font-weight: 100;
}

/* Toast notifications */
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeOutUp {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-12px); }
}
.toast-fade-in {
  animation: fadeInDown 0.25s ease-out forwards;
}
.toast-fade-out {
  animation: fadeOutUp 0.25s ease-in forwards;
}