/* Colors CSS File - Color variables and themes */

:root {
    /* Primary Colors */
    --color-primary: #29a39a;
    --color-primary-light: #4dbfb6;
    --color-primary-dark: #1b7c75;
    
    /* Secondary Colors */
    --color-secondary: #5f7c8a;
    --color-secondary-light: #8aa2ad;
    --color-secondary-dark: #455a63;
    
    /* Accent Colors */
    --color-accent: #e67e22;
    --color-accent-light: #f39c12;
    --color-accent-dark: #d35400;
    
    /* Status Colors */
    --color-success: #27ae60;
    --color-warning: #f39c12;
    --color-error: #e74c3c;
    
    /* Neutral Colors */
    --color-white: #ffffff;
    --color-gray-100: #f8f9fa;
    --color-gray-200: #e9ecef;
    --color-gray-300: #dee2e6;
    --color-gray-400: #ced4da;
    --color-gray-500: #adb5bd;
    --color-gray-600: #6c757d;
    --color-gray-700: #495057;
    --color-gray-800: #343a40;
    --color-gray-900: #212529;
    --color-black: #000000;
    
    /* Background Colors */
    --color-background: var(--color-white);
    --color-background-alt: var(--color-gray-100);
    --color-background-dark: var(--color-gray-800);
    
    /* Text Colors */
    --color-text-primary: var(--color-gray-900);
    --color-text-secondary: var(--color-gray-700);
    --color-text-light: var(--color-gray-600);
    --color-text-white: var(--color-white);
    
    /* Border Colors */
    --color-border: var(--color-gray-300);
    --color-border-light: var(--color-gray-200);
    --color-border-focus: var(--color-primary);
    
    /* Shadow Colors */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
}

/* Dark sections background */
.benefits-section,
.testimonials-section,
.faq-section {
    background-color: var(--color-background-alt);
}

.process-section,
.contact-section,
.recipes-section {
    background-color: var(--color-white);
}

.hero-section {
    background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
    color: var(--color-text-white);
}

.site-footer {
    background-color: var(--color-background-dark);
    color: var(--color-text-white);
}