:root {
    --primary-color: #401305;
    --secondary-color: #0a0a0a;
    --accent-color: #f39c12;
    --text-color: #333;
    --text-light: #666;
    --header-color: #FFF6F4;
    --bg-color: #fdeee5;
    --bg-light: #FFF6F4;
    --border-color: #401305;
    --hover-primary: #e55a2b;

    --font-size-xs: 0.875rem;   
    --font-size-sm: 1rem;       
    --font-size-base: 1.125rem; 
    --font-size-md: 1.25rem;    
    --font-size-lg: 1.5rem;     
    --font-size-xl: 2rem;       
    --font-size-2xl: 2.5rem;    
    --font-size-3xl: 3rem;      

    --header-height: 70px;
    --search-height: 50px;
    --button-padding: 0.75rem 1.5rem;
    --button-padding-lg: 1rem 2rem;
    --border-radius: 8px;
    --border-radius-lg: 16px;

    --shadow-sm: 0 1px 4px rgba(0,0,0,0.08);
    --shadow: 0 2px 10px rgba(0,0,0,0.1);
    --shadow-lg: 0 4px 20px rgba(0,0,0,0.15);
    --transition: all 0.3s ease;
}


@media (max-width: 768px) {
    :root {
        --font-size-base: 1rem;
        --font-size-md: 1.125rem;
        --font-size-lg: 1.25rem;
        --font-size-xl: 1.5rem;
        --font-size-2xl: 1.75rem;
        --font-size-3xl: 2rem;
    }
}