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

/* ============================================
   GLOBAL STYLES
   ============================================
   Think of this as your theme.css in Shopware
*/

@layer base {
  html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
  }

  body {
    @apply bg-white;
    /* Text color driven by NEXT_PUBLIC_COLOR_TEXT, falls back to surface-900 */
    color: var(--color-text, #18181b);
    font-family: var(--font-primary, system-ui, sans-serif);
  }

  h1, h2, h3, h4, h5, h6 {
    /* Headline color driven by NEXT_PUBLIC_COLOR_HEADLINE */
    color: var(--color-headline, #18181b);
  }
}

/* Smooth page transitions */
@layer utilities {
  .animate-fade-in {
    animation: fadeIn 0.3s ease-out;
  }

  .animate-slide-in {
    animation: slideIn 0.3s ease-out;
  }

  .animate-slide-up {
    animation: slideUp 0.4s ease-out;
  }

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

  @keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
  }

  @keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
}