/* global.css */
:root {
    /* Light Theme Variables */
    --bg: #ffffff;
    --card-bg: #f7f7f7;
    --text: #111111;
    --muted: #6b6b6b;
    --border: rgba(0, 0, 0, 0.08);
    --glow: rgba(0, 0, 0, 0.18);
    --accent: #3a3a3a;
    --accent-light: #525252;
    --grey-50: #fafafa;
    --grey-100: #f5f5f5;
    --grey-200: #e5e5e5;
    --grey-300: #d4d4d4;
    --grey-400: #a3a3a3;
    --grey-500: #737373;
    --grey-600: #525252;
    --grey-700: #404040;
    --grey-800: #262626;
    --grey-900: #171717;
    
    /* Effects */
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    --shadow-heavy: 0 20px 60px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    
    /* Transitions */
    --t-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --t-medium: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --t-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Layout */
    --container-max: 1400px;
    --border-radius: 16px;
    --border-radius-sm: 8px;
    --border-radius-lg: 24px;
}

/* Dark Theme Variables */
body.dark-theme {
    --bg: #0c0c0c;
    --card-bg: #141414;
    --text: #f5f5f5;
    --muted: #9b9b9b;
    --border: rgba(255, 255, 255, 0.08);
    --glow: rgba(255, 255, 255, 0.22);
    --accent: #e0e0e0;
    --accent-light: #b0b0b0;
    --grey-50: #0a0a0a;
    --grey-100: #171717;
    --grey-200: #262626;
    --grey-300: #404040;
    --grey-400: #525252;
    --grey-500: #737373;
    --grey-600: #a3a3a3;
    --grey-700: #d4d4d4;
    --grey-800: #e5e5e5;
    --grey-900: #f5f5f5;
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    --shadow-heavy: 0 20px 60px rgba(0, 0, 0, 0.3);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg);
    color: var(--text);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color var(--t-medium), color var(--t-medium);
}

/* ... rest of global styles ... */

/* Add these classes for product cards and interactive elements */
.product-card {
    transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1), box-shadow 0.3s ease;
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.product-image img {
    transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

.product-card:hover .product-image img {
    transform: scale(1.05);
}

/* Button animations */
.btn {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn:active {
    transform: translateY(0);
}

/* Ripple effect on buttons */
.btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn:active::after {
    width: 300px;
    height: 300px;
}

/* Cart count badge animation */
.cart-count {
    transition: transform 0.3s ease;
}

.cart-count.pulse {
    animation: pulse 0.5s ease-in-out;
}

/* Notification animations */
.notification {
    animation: slideInRight 0.3s ease forwards;
}

.notification.removing {
    animation: slideOutRight 0.3s ease forwards;
}

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

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

/* Hero slider animations */
.slide {
    transition: opacity 0.8s ease;
}

.slide-image {
    animation: float 6s ease-in-out infinite;
}

/* Loading animations */
.loading-shimmer {
    background: linear-gradient(90deg, 
        #f0f0f0 25%, 
        #e0e0e0 50%, 
        #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}