/* variables.css */
:root {
    /* Colors */
    --color-primary: #111111;
    --color-secondary: #555555;
    --color-text: #222222;
    --color-text-muted: #878787;
    --color-bg: #ffffff;
    --color-bg-light: #f5f5f5;
    --color-border: #e8e8e8;
    
    /* Specific Brand Colors */
    --color-announcement: #e2f041; /* Yellow/Lime color from top bar */
    --color-sale: #ff4e00;
    --color-new: #00b853;
    --color-footer-bg: #1a1a1a;
    --color-footer-text: #999999;

    /* Typography */
    --font-primary: 'Inter', system-ui, -apple-system, sans-serif;
    
    --text-xs: 12px;
    --text-sm: 14px;
    --text-base: 15px;
    --text-md: 16px;
    --text-lg: 18px;
    --text-xl: 24px;
    --text-2xl: 36px;
    --text-3xl: 48px;
    
    /* Spacing */
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 12px;
    --spacing-4: 16px;
    --spacing-5: 20px;
    --spacing-6: 24px;
    --spacing-8: 32px;
    --spacing-10: 40px;
    --spacing-12: 48px;
    --spacing-16: 64px;
    --spacing-20: 80px;
    --spacing-24: 96px;
    
    /* Layout */
    --container-max-width: 1200px;
    --header-height: 80px;
    --announcement-height: 40px;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}