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

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

/* Custom Guitar Shop Design System
   Warm, artisanal, wood-inspired palette */

@layer base {
  :root {
    /* Core palette - warm, earthy tones */
    --background: 40 33% 96%;
    --foreground: 25 25% 15%;

    --card: 40 40% 94%;
    --card-foreground: 25 25% 15%;

    --popover: 40 33% 96%;
    --popover-foreground: 25 25% 15%;

    /* Primary: Rich mahogany */
    --primary: 15 45% 25%;
    --primary-foreground: 40 40% 95%;

    /* Secondary: Warm cream */
    --secondary: 38 35% 88%;
    --secondary-foreground: 25 25% 15%;

    /* Muted: Soft wood */
    --muted: 35 25% 90%;
    --muted-foreground: 25 15% 45%;

    /* Accent: Warm amber/copper */
    --accent: 28 75% 45%;
    --accent-foreground: 40 40% 98%;

    --destructive: 0 65% 50%;
    --destructive-foreground: 0 0% 100%;

    --border: 30 20% 85%;
    --input: 30 20% 85%;
    --ring: 28 75% 45%;

    --radius: 0.375rem;

    /* Custom tokens */
    --wood-light: 35 40% 80%;
    --wood-medium: 25 35% 55%;
    --wood-dark: 20 40% 20%;
    --gold: 42 85% 55%;
    --cream: 42 45% 95%;

    /* Gradients */
    --gradient-warm: linear-gradient(135deg, hsl(35 40% 80%) 0%, hsl(28 75% 45% / 0.2) 100%);
    --gradient-hero: linear-gradient(180deg, hsl(40 33% 96%) 0%, hsl(35 35% 90%) 100%);
    --gradient-card: linear-gradient(145deg, hsl(40 40% 96%) 0%, hsl(35 30% 92%) 100%);

    /* Shadows */
    --shadow-soft: 0 4px 20px -4px hsl(25 25% 15% / 0.08);
    --shadow-warm: 0 8px 30px -8px hsl(28 75% 45% / 0.15);
    --shadow-elevated: 0 20px 50px -15px hsl(25 25% 15% / 0.12);

    --sidebar-background: 40 33% 96%;
    --sidebar-foreground: 25 25% 15%;
    --sidebar-primary: 15 45% 25%;
    --sidebar-primary-foreground: 40 40% 95%;
    --sidebar-accent: 38 35% 88%;
    --sidebar-accent-foreground: 25 25% 15%;
    --sidebar-border: 30 20% 85%;
    --sidebar-ring: 28 75% 45%;
  }

  .dark {
    --background: 20 25% 8%;
    --foreground: 40 30% 90%;

    --card: 20 20% 12%;
    --card-foreground: 40 30% 90%;

    --popover: 20 25% 8%;
    --popover-foreground: 40 30% 90%;

    --primary: 28 75% 50%;
    --primary-foreground: 20 25% 8%;

    --secondary: 25 20% 18%;
    --secondary-foreground: 40 30% 90%;

    --muted: 25 15% 20%;
    --muted-foreground: 35 15% 60%;

    --accent: 35 70% 55%;
    --accent-foreground: 20 25% 8%;

    --destructive: 0 62% 45%;
    --destructive-foreground: 0 0% 100%;

    --border: 25 15% 20%;
    --input: 25 15% 20%;
    --ring: 28 75% 50%;

    --wood-light: 30 25% 35%;
    --wood-medium: 25 30% 45%;
    --wood-dark: 20 35% 12%;
    --gold: 42 80% 50%;
    --cream: 35 20% 15%;

    --gradient-warm: linear-gradient(135deg, hsl(25 20% 15%) 0%, hsl(28 75% 45% / 0.1) 100%);
    --gradient-hero: linear-gradient(180deg, hsl(20 25% 8%) 0%, hsl(25 20% 12%) 100%);
    --gradient-card: linear-gradient(145deg, hsl(20 20% 14%) 0%, hsl(25 18% 10%) 100%);

    --shadow-soft: 0 4px 20px -4px hsl(0 0% 0% / 0.3);
    --shadow-warm: 0 8px 30px -8px hsl(28 75% 45% / 0.2);
    --shadow-elevated: 0 20px 50px -15px hsl(0 0% 0% / 0.4);

    --sidebar-background: 20 25% 8%;
    --sidebar-foreground: 40 30% 90%;
    --sidebar-primary: 28 75% 50%;
    --sidebar-primary-foreground: 20 25% 8%;
    --sidebar-accent: 25 20% 18%;
    --sidebar-accent-foreground: 40 30% 90%;
    --sidebar-border: 25 15% 20%;
    --sidebar-ring: 28 75% 50%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground font-sans antialiased;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-serif;
  }
}

@layer utilities {
  .font-serif {
    font-family: 'Cormorant Garamond', Georgia, serif;
  }

  .font-sans {
    font-family: 'Inter', system-ui, sans-serif;
  }

  .text-gradient {
    @apply bg-clip-text text-transparent;
    background-image: linear-gradient(135deg, hsl(var(--accent)) 0%, hsl(var(--gold)) 100%);
  }

  .bg-gradient-warm {
    background: var(--gradient-warm);
  }

  .bg-gradient-hero {
    background: var(--gradient-hero);
  }

  .bg-gradient-card {
    background: var(--gradient-card);
  }

  .shadow-soft {
    box-shadow: var(--shadow-soft);
  }

  .shadow-warm {
    box-shadow: var(--shadow-warm);
  }

  .shadow-elevated {
    box-shadow: var(--shadow-elevated);
  }

  .pattern-grid-60 {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
  }

  .pattern-grid-80 {
    background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='1' fill-rule='evenodd'%3E%3Cpath d='M20 20h2v2h-2v-2zm18 0h2v2h-2v-2zm18 0h2v2h-2v-2zm-36 18h2v2h-2v-2zm18 0h2v2h-2v-2zm18 0h2v2h-2v-2zm-36 18h2v2h-2v-2zm18 0h2v2h-2v-2zm18 0h2v2h-2v-2z'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
  }

  .pattern-grid-90 {
    background-image: url("data:image/svg+xml,%3Csvg width='90' height='90' viewBox='0 0 90 90' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='1' fill-rule='evenodd'%3E%3Cpath d='M22 22h2v2h-2v-2zm23 0h2v2h-2v-2zm23 0h2v2h-2v-2zm-46 23h2v2h-2v-2zm23 0h2v2h-2v-2zm23 0h2v2h-2v-2zm-46 23h2v2h-2v-2zm23 0h2v2h-2v-2zm23 0h2v2h-2v-2z'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
  }

  .reveal-delay-0 { --reveal-delay: 0s; }
  .reveal-delay-100 { --reveal-delay: 0.1s; }
  .reveal-delay-150 { --reveal-delay: 0.15s; }
  .reveal-delay-200 { --reveal-delay: 0.2s; }
  .reveal-delay-250 { --reveal-delay: 0.25s; }
  .reveal-delay-300 { --reveal-delay: 0.3s; }
  .reveal-delay-350 { --reveal-delay: 0.35s; }
  .reveal-delay-400 { --reveal-delay: 0.4s; }
}

/* Framer Motion-style animations for static content */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 500px;
  }
}

.animate-fadeInUp {
  opacity: 0;
  animation: fadeInUp 0.9s cubic-bezier(0.21, 1, 0.33, 1) forwards;
  will-change: transform, opacity;
}

.animate-fadeIn {
  opacity: 0;
  animation: fadeIn 0.8s ease-out forwards;
}

.animate-slideDown {
  animation: slideDown 0.3s ease-out forwards;
}

.animate-delay-100 { animation-delay: 0.1s; }
.animate-delay-200 { animation-delay: 0.2s; }
.animate-delay-300 { animation-delay: 0.3s; }
.animate-delay-400 { animation-delay: 0.4s; }
.animate-delay-500 { animation-delay: 0.5s; }
.animate-delay-600 { animation-delay: 0.6s; }

/* Scroll reveal */
.scroll-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.8s ease-out,
    transform 0.8s cubic-bezier(0.21, 1, 0.33, 1);
  transition-delay: var(--reveal-delay, 0s);
  will-change: transform, opacity;
}

.scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .animate-fadeInUp,
  .animate-fadeIn,
  .scroll-reveal {
    animation: none;
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* Mobile Navigation */
.mobile-nav {
  display: none;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: all 0.3s ease-out;
  transform: translateY(-10px);
}

.mobile-nav.open {
  display: block;
  opacity: 1;
  max-height: 500px;
  transform: translateY(0);
}

/* Fallback for when React doesn't load */
.mobile-menu-toggle {
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  background-color: transparent;
  border: none;
  padding: 8px;
  border-radius: 0.375rem;
}

.mobile-menu-toggle:hover {
  background-color: hsl(var(--muted) / 0.5);
}

.mobile-menu-toggle:active {
  transform: scale(0.95);
}

/* Ensure SVG icon is visible */
.mobile-menu-toggle svg {
  width: 24px;
  height: 24px;
  color: hsl(var(--foreground));
  stroke-width: 2;
}

/* Ensure mobile menu button is visible on mobile */
@media (max-width: 767px) {
  .mobile-menu-toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 10 !important;
  }
}

/* Mobile navigation links */
.mobile-nav a {
  transition: color 0.3s ease;
}

/* Better mobile menu animation */
@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    max-height: 500px;
    transform: translateY(0);
  }
}

.mobile-nav.open {
  animation: slideDown 0.3s ease-out forwards;
}

/* Guitar Cards - Fallback styling */
.guitar-card {
  @apply rounded-lg border bg-card text-card-foreground shadow-sm overflow-hidden hover:shadow-lg transition-all duration-300 hover:shadow-warm;
}

.guitar-card-image {
  @apply aspect-square relative;
}

.guitar-card-image img {
  @apply w-full h-full object-cover;
}

.guitar-card-favorite {
  @apply absolute top-2 right-2 bg-white/80 hover:bg-white backdrop-blur-sm;
}

.guitar-card-content {
  @apply p-6 pt-0;
}

.guitar-card-title {
  @apply font-serif text-xl font-semibold mb-2 text-foreground;
}

.guitar-card-description {
  @apply text-sm text-muted-foreground mb-4 leading-relaxed;
}

.guitar-card-footer {
  @apply flex items-center justify-between;
}

.guitar-card-price {
  @apply text-xl font-bold text-foreground;
}

/* Accessibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.focus\:not-sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
}