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

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&display=swap');

@layer base {
  :root {
    --color-brown: 42, 24, 16;
    --color-orange: 216, 94, 44;
    --color-orange-hover: 197, 77, 27;
    --color-cream: 250, 247, 242;
    --color-wood: 139, 94, 60;
    --font-primary: 'DM Sans', sans-serif;
  }

  html {
    font-family: var(--font-primary);
    scroll-behavior: smooth;
  }

  body {
    @apply bg-cream;
    font-family: var(--font-primary);
  }

  * {
    font-family: var(--font-primary);
  }
}

/* Custom colors */
.text-brown { color: rgb(var(--color-brown)); }
.bg-brown { background-color: rgb(var(--color-brown)); }
.text-orange { color: rgb(var(--color-orange)); }
.bg-orange { background-color: rgb(var(--color-orange)); }
.text-cream { color: rgb(var(--color-cream)); }
.bg-cream { background-color: rgb(var(--color-cream)); }
.text-wood { color: rgb(var(--color-wood)); }
.bg-wood { background-color: rgb(var(--color-wood)); }

/* Border colors */
.border-brown { border-color: rgb(var(--color-brown)); }
.border-orange { border-color: rgb(var(--color-orange)); }
.border-wood { border-color: rgb(var(--color-wood)); }
.border-cream { border-color: rgb(var(--color-cream)); }


/* Focus states */
.focus\:border-orange:focus { border-color: rgb(var(--color-orange)); }
.focus\:ring-orange:focus { --tw-ring-color: rgb(var(--color-orange)); }

@layer components {
  .hover\:bg-orange-hover:hover { background-color: rgb(var(--color-orange-hover)); }
  .hover\:text-orange-hover:hover { color: rgb(var(--color-orange-hover)); }
}

/* Animations */
@keyframes fade-in-down {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(10px);
  }
}

.animate-fade-in-down {
  animation: fade-in-down 0.5s ease-out forwards;
}

.animate-fade-out {
  animation: fade-out 0.5s ease-out forwards;
}

/* Scrollbar hiding for horizontal scrolling navigation */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}