/* Base Styles */
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --bg: #ffffff;
    --fg: #000000;
    --muted: #666666;
    --muted-2: #dddddd;
    --accent: #111111;
}

body {
    background: var(--bg);
    color: var(--fg);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    overflow-x: hidden;
}

/* Typography */
h1, h2, h3, h4 {
    @apply font-bold tracking-tight;
}

/* Buttons */
.btn {
    @apply inline-block rounded-lg font-medium transition-all duration-300 border-2;
}
.btn-primary {
    @apply bg-black text-white border-black hover:bg-transparent hover:text-black;
}
.btn-outline {
    @apply border-black text-black hover:bg-black hover:text-white;
}

/* Product Cards */
.product-card {
    @apply transition-transform duration-300 hover:-translate-y-1;
}

/* Animations */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.float-animation {
    animation: float 4s ease-in-out infinite;
}

/* Scroll Behavior */
html {
    scroll-behavior: smooth;
}

/* Image Effects */
.grayscale {
    filter: grayscale(100%);
    transition: filter 0.5s ease;
}
.grayscale:hover {
    filter: grayscale(0%);
}

/* Overlay Effects */
.overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
}

/* Utility Classes */
.section-padding {
    @apply py-20 px-4;
}
.max-width {
    @apply max-w-7xl mx-auto;
}