/**
 * Pastel Color Palette Variables
 * Knjige za decu - New Design System
 * Pastel theme for children's bookstore
 */

:root {
    /* Primary Pastel Colors */
    --primary: #D6B7F0;
    --secondary: #E7DEE3;
    --accent: #F6E6D6;
    --soft-bg: #F1F1F2;
    --white: #FFFFFF;
    
    /* Text Colors */
    --text-color: #333333;
    --text-secondary: #666666;
    --text-muted: #999999;
    --text-light: #FFFFFF;
    
    /* Semantic Color Aliases */
    --color-primary: var(--primary);
    --color-secondary: var(--secondary);
    --color-accent: var(--accent);
    --color-soft-bg: var(--soft-bg);
    --color-white: var(--white);
    
    /* Border Colors */
    --border-color: rgba(214, 183, 240, 0.3);
    --border-color-hover: rgba(214, 183, 240, 0.5);
    --border-light: rgba(241, 241, 242, 0.5);
    
    /* Shadow - Soft and gentle */
    --shadow-sm: 0 2px 8px rgba(214, 183, 240, 0.08);
    --shadow-md: 0 4px 12px rgba(214, 183, 240, 0.12);
    --shadow-lg: 0 8px 24px rgba(214, 183, 240, 0.15);
    --shadow-hover: 0 6px 20px rgba(214, 183, 240, 0.2);
    
    /* Transition - Smooth and gentle */
    --transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.15s ease;
    --transition-slow: all 0.5s ease;
    
    /* Spacing - Generous for readability */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 3rem;
    
    /* Border Radius - Rounded and soft */
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-full: 50%;
    --radius-card: 1.25rem;
}

/* Bootstrap Overrides */
[data-bs-theme="light"] {
    --bs-primary: var(--primary);
    --bs-secondary: var(--secondary);
    --bs-body-bg: var(--white);
    --bs-body-color: var(--text-color);
}

[data-bs-theme="dark"] {
    --bs-primary: var(--primary);
    --bs-secondary: var(--secondary);
    --bs-body-bg: #1a1a1a;
    --bs-body-color: var(--text-light);
}

/* Utility Classes */
.bg-primary-custom {
    background-color: var(--primary) !important;
}

.bg-secondary-custom {
    background-color: var(--secondary) !important;
}

.bg-accent-custom {
    background-color: var(--accent) !important;
}

.bg-soft-custom {
    background-color: var(--soft-bg) !important;
}

.bg-white-custom {
    background-color: var(--white) !important;
}

.text-primary-custom {
    color: var(--primary) !important;
}

.text-secondary-custom {
    color: var(--secondary) !important;
}

.text-color-custom {
    color: var(--text-color) !important;
}

.border-primary-custom {
    border-color: var(--primary) !important;
}