@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);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  * {
    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)); }
}

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

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

/* Mobile-optimized tap targets and interactions */
@media (pointer: coarse) {
  button, a {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  }
}

/* Smooth image loading */
img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Line clamping utilities */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}