/* ========================================
   MAIN APP CSS - TBVS Shop
   Combines all CSS files
   ======================================== */

/* Core */
@import url('core/variables.css');

/* Layout */
@import url('layout/header.css');
@import url('layout/footer.css');

/* Components */
@import url('components/buttons.css');
@import url('components/effects.css');
@import url('components/modals.css');

/* Pages */
@import url('pages/product.css');

/* ========================================
   GLOBAL UTILITIES
   ======================================== */

/* Text Utilities */
.text-primary {
    color: var(--primary-color) !important;
}

.text-gradient {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Spacing Utilities */
.mt-1 {
    margin-top: var(--spacing-xs);
}

.mt-2 {
    margin-top: var(--spacing-sm);
}

.mt-3 {
    margin-top: var(--spacing-md);
}

.mt-4 {
    margin-top: var(--spacing-lg);
}

.mt-5 {
    margin-top: var(--spacing-xl);
}

.mb-1 {
    margin-bottom: var(--spacing-xs);
}

.mb-2 {
    margin-bottom: var(--spacing-sm);
}

.mb-3 {
    margin-bottom: var(--spacing-md);
}

.mb-4 {
    margin-bottom: var(--spacing-lg);
}

.mb-5 {
    margin-bottom: var(--spacing-xl);
}

/* Shadow Utilities */
.shadow-sm {
    box-shadow: var(--shadow-sm);
}

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

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

/* Border Radius Utilities */
.rounded-sm {
    border-radius: var(--radius-sm);
}

.rounded-md {
    border-radius: var(--radius-md);
}

.rounded-lg {
    border-radius: var(--radius-lg);
}

.rounded-full {
    border-radius: var(--radius-full);
}

/* Animation Utilities */
.transition-fast {
    transition: var(--transition-fast);
}

.transition-normal {
    transition: var(--transition-normal);
}

.transition-slow {
    transition: var(--transition-slow);
}

/* Hover Effects */
.hover-lift {
    transition: var(--transition-normal);
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.hover-scale {
    transition: var(--transition-normal);
}

.hover-scale:hover {
    transform: scale(1.05);
}