@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Montserrat:wght@300;400;500;600&display=swap');

:root {
  --background: #000000;
  --foreground: #ffffff;
  --muted: #0a0a0a;
  --muted-foreground: #a1a1aa;
  --card: #050505;
  --card-foreground: #ffffff;
  --border: #18181b;
  --input: #18181b;
  --primary: #ffffff;
  --primary-foreground: #000000;
  --secondary: #18181b;
  --secondary-foreground: #a1a1aa;
  --accent: #27272a;
  --accent-foreground: #fafafa;
  --destructive: #7f1d1d;
  --ring: #3f3f46;
  --radius: 0rem;
  --wood: #c4a77d;
  --wood-light: #e6d5b8;
  --wood-dark: #8b7355;
}

html.dark {
  --background: #000000;
  --foreground: #ffffff;
  --muted: #0a0a0a;
  --muted-foreground: #a1a1aa;
  --card: #050505;
  --card-foreground: #ffffff;
  --border: #18181b;
  --input: #18181b;
  --primary: #ffffff;
  --primary-foreground: #000000;
  --secondary: #18181b;
  --secondary-foreground: #a1a1aa;
  --accent: #27272a;
  --accent-foreground: #fafafa;
  --ring: #3f3f46;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.01em;
  line-height: 1.65;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

::selection {
  background-color: var(--accent);
  color: var(--accent-foreground);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  image-rendering: -webkit-optimize-contrast;
}

/* Product image quality improvements */
#main-product-image,
#lightbox-image,
.thumbnail-btn img {
  image-rendering: crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  -ms-interpolation-mode: nearest-neighbor;
  filter: contrast(1.2) brightness(1.05) saturate(1.15) drop-shadow(0 0 0.5px rgba(0,0,0,0.1));
  backdrop-filter: brightness(1.05);
}

/* Extra sharpening for lightbox images */
#lightbox-image {
  filter: contrast(1.3) brightness(1.08) saturate(1.2) drop-shadow(0 0 1px rgba(0,0,0,0.15)) blur(0.3px) !important;
  -webkit-filter: contrast(1.3) brightness(1.08) saturate(1.2) drop-shadow(0 0 1px rgba(0,0,0,0.15)) blur(0.3px);
}

/* Main product image enhancement */
#main-product-image {
  filter: contrast(1.25) brightness(1.06) saturate(1.1) drop-shadow(0 0 0.5px rgba(0,0,0,0.1));
}

/* Custom Tailwind-like Utilities for the colors */
.bg-wood-dark { background-color: var(--wood-dark); }
.text-primary-foreground { color: var(--primary-foreground); }
.text-wood-light { color: var(--wood-light); }
.bg-muted { background-color: var(--muted); }
.bg-card { background-color: var(--card); }
.border-border { border-color: var(--border); }
.text-muted-foreground { color: var(--muted-foreground); }
.text-foreground { color: var(--foreground); }
.bg-foreground { color: var(--background); background-color: var(--foreground); }
.text-background { color: var(--background); }
.fill-wood-light { fill: var(--wood-light); }

/* Social Media Buttons */
.social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  background-color: var(--card);
  border: 1px solid var(--border);
  color: var(--foreground);
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.social-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 20px -5px rgba(0, 0, 0, 0.08);
  border-color: transparent;
  color: white;
}

.social-btn.whatsapp:hover { background-color: #25D366; }
.social-btn.facebook:hover { background-color: #1877F2; }
.social-btn.instagram:hover { background-image: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }

/* Dark mode header styling */
html.dark header {
  background-color: var(--card);
  color: var(--foreground);
}

html.dark #mobile-menu {
  background-color: rgba(26, 25, 23, 0.95);
  border-color: var(--border);
}

/* Smooth transition for dark mode */
html,
body,
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}