@tailwind base;
@tailwind components;
@tailwind utilities;

/* Define your theme tokens (colors, breakpoints, etc.) */
:root {
  --breakpoint-md: 880px;
  --color-primary: #1f7a8c;
  --color-secondary: #9e9d72;
  --color-accent: #b6a96c;
}

/* Add dark-mode variant support */
@media (prefers-color-scheme: dark) {
  :root {
    /* Example: override theme tokens for dark mode */
    --color-primary: #133b5c;
    --color-secondary: #a2aebb;
    --color-accent: #e3c567;
  }
}

/* Optional: Add base-level custom styles via @layer base */
@layer base {
  html {
    scroll-behavior: smooth;
  }
}

/* ============================ */
/* 📱 LAYOUT CONSTRAINTS + FIXES */
/* ============================ */

body,
html {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body {
  position: relative; /* Prevent scroll bar shift on toggle */
}

/* Mobile dropdown menu scroll fix */
#mobile-menu {
  max-width: 100vw;
  overflow-x: hidden;
}

/* ======================== */
/* 🎞️ CUSTOM ANIMATIONS     */
/* ======================== */

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

@keyframes fade-zoom-soft {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes spinDown {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(425deg); }
  100% { transform: rotate(450deg); }
}

.animate-spin-once {
  animation: spinDown .5s ease-out forwards;
}

/* ========================== */
/* 🕒 CUSTOM STAGGER DELAYS    */
/* ========================== */
.delay-200 {
  animation-delay: 200ms;
}
.delay-400 {
  animation-delay: 400ms;
}
.delay-600 {
  animation-delay: 600ms;
}

.animate-fade-up {
  animation: fade-up 0.6s ease-out forwards;
  will-change: transform, opacity;
}

.animate-fade-zoom-soft {
  animation: fade-zoom-soft 0.5s ease-out forwards;
  will-change: opacity, transform;
}

/* =========================================
   Hover Glow Utility (Reusable)
   ========================================= */
.hover-glow {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.hover-glow:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), 0 8px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.hover-glow:hover {
  box-shadow: 0 4px 8px rgba(182, 169, 108, 0.4), 0 8px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}
/* Sticky sidebar offset helper */
@layer utilities {
  .top-sb {
    top: var(--sb-top, 9rem);
  }
}