/**
 * JAW Shop Design System
 * CSS Custom Properties (Variables)
 */

:root {
    /* === COLORS === */
    --color-accent: #A0415E;
    --color-primary: #FFFFFF;
    --color-light-bg: #FFF3F7;
    --color-text: #2C000D;
    --color-text-nav: #fff;
    --color-text-muted: #666666;
    --color-border: #2C000D;
    
    /* Additional color aliases for compatibility */
    --color-white: #FFFFFF;
    --color-background-light: #FFF3F7;
    
    /* === TYPOGRAPHY === */
    --font-heading: 'ZT Neue Ralewe', 'Georgia', serif;
    --font-body: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    
    --font-size-h1: 42px;
    --font-size-h2: 36px;
    --font-size-h3: 24px;
    --font-size-lg: 24px;
    --font-size-body: 18px;
    --font-size-menu: 14px;
    --font-size-xs: 12px;
    
    --font-weight-heading: 500;
    --font-weight-body: 400;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;
    
    /* === H1 SPECIFIC === */
    --h1-font-family: 'ZT Neue Ralewe', serif;
    --h1-font-weight: 500;
    --h1-font-size: 42px;
    --h1-line-height: 100%;
    --h1-letter-spacing: 0%;
    
    /* === H2 SPECIFIC === */
    --h2-font-family: 'ZT Neue Ralewe', serif;
    --h2-font-weight: 500;
    --h2-font-size: 36px;
    --h2-line-height: 110%;
    
    /* === SPACING === */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 32px;
    --spacing-xl: 48px;
    --spacing-xxl: 64px;
    
    /* === LAYOUT === */
    --container-max-width: 1320px;
    --container-padding: 60px;
    
    /* === BORDERS === */
    --border-radius: 8px;
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    
    /* === SHADOWS === */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    
    /* === TRANSITIONS === */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.6s ease;
}

/* === BASE TYPOGRAPHY === */
body {
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-body);
    color: var(--color-text);
}

h1, h2 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    color: var(--color-text);
}

.d-flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
}