/*
Theme Name: GeneratePress Child - Quick Plate Chef
Theme URI: https://quickplatechef.com
Description: Custom child theme for Quick Plate Chef with dynamic color management and brand-aligned design.
Author: Quick Plate Chef Team
Author URI: https://quickplatechef.com
Template: generatepress
Version: 2.0.0
Text Domain: quickplatechef
*/

/* ========================================
   QUICK PLATE CHEF - COLOR VARIABLE SYSTEM
   All colors controlled via WordPress Customizer
   Brand: Deep Navy + Dark Gray + Orange-Red
   ======================================== */

:root {
    /* ============================================
       GLOBAL BRAND COLORS
       Primary: Deep Navy (professional, chef-like)
       Secondary: Dark Gray (professional, grounded)
       Accent: Orange-Red (appetizing, energetic)
       ============================================ */
    
    --color-primary: #1E3A5F;
    --color-primary-dark: #152B47;
    --color-primary-light: #2A4F7A;
    --color-secondary: #2C3E50;
    --color-accent: #E85A4F;
    --color-accent-light: #FF7A6B;
    --color-background: #FAF8F5;
    --color-background-alt: #F5F0EA;
    --color-text-primary: #2C2C2C;
    --color-text-secondary: #5A5A5A;
    
    /* ============================================
       RGB VALUES (for rgba() usage)
       ============================================ */
    --color-primary-rgb: 30, 58, 95;
    --color-secondary-rgb: 44, 62, 80;
    --color-accent-rgb: 232, 90, 79;
    
    /* ============================================
       HERO SECTION COLORS
       ============================================ */
    --color-hero-bg-start: #1E3A5F;
    --color-hero-bg-end: #2A4F7A;
    --color-hero-title-accent: #FF7A6B;
    --color-hero-button: #E85A4F;
    --color-hero-button-hover: #D44A3F;
    
    /* ============================================
       CATEGORIES SECTION COLORS
       ============================================ */
    --color-categories-bg: #2C3E50;
    --color-categories-card-bg: #FFFFFF;
    --color-categories-card-border: #E85A4F;
    --color-categories-link: #1E3A5F;
    
    /* ============================================
       POSTS SECTION COLORS
       ============================================ */
    --color-posts-bg: #FAF8F5;
    --color-posts-card-bg: #FFFFFF;
    --color-posts-title: #1E3A5F;
    --color-posts-badge: #E85A4F;
    
    /* ============================================
       FAVORITES SECTION COLORS
       ============================================ */
    --color-favorites-bg-start: #1E3A5F;
    --color-favorites-bg-end: #152B47;
    --color-favorites-card-bg: #FFFFFF;
    
    /* ============================================
       NEWSLETTER SECTION COLORS
       ============================================ */
    --color-newsletter-bg: #2C3E50;
    --color-newsletter-form-bg: #FFFFFF;
    --color-newsletter-button: #E85A4F;
    
    /* ============================================
       ABOUT US PAGE COLORS
       ============================================ */
    --color-about-hero-bg: #1E3A5F;
    --color-about-story-bg: #FAF8F5;
    --color-about-team-bg: #1E3A5F;
    --color-about-philosophy-bg: #F5F0EA;
    --color-about-community-bg: #E85A4F;
    
    /* ============================================
       FOOTER COLORS
       ============================================ */
    --color-footer-bg: #2C3E50;
    --color-footer-text: #FFFFFF;
    --color-footer-link: #FF7A6B;
    
    /* ============================================
       DERIVED TRANSPARENCY COLORS
       Auto-generated from primary colors
       ============================================ */
    --color-primary-90: rgba(var(--color-primary-rgb), 0.9);
    --color-primary-80: rgba(var(--color-primary-rgb), 0.8);
    --color-primary-60: rgba(var(--color-primary-rgb), 0.6);
    --color-primary-40: rgba(var(--color-primary-rgb), 0.4);
    --color-primary-20: rgba(var(--color-primary-rgb), 0.2);
    --color-primary-10: rgba(var(--color-primary-rgb), 0.1);
    
    --color-secondary-90: rgba(var(--color-secondary-rgb), 0.9);
    --color-secondary-80: rgba(var(--color-secondary-rgb), 0.8);
    --color-secondary-60: rgba(var(--color-secondary-rgb), 0.6);
    --color-secondary-40: rgba(var(--color-secondary-rgb), 0.4);
    --color-secondary-20: rgba(var(--color-secondary-rgb), 0.2);
    --color-secondary-10: rgba(var(--color-secondary-rgb), 0.1);
    
    --color-accent-90: rgba(var(--color-accent-rgb), 0.9);
    --color-accent-80: rgba(var(--color-accent-rgb), 0.8);
    --color-accent-60: rgba(var(--color-accent-rgb), 0.6);
    --color-accent-40: rgba(var(--color-accent-rgb), 0.4);
    --color-accent-20: rgba(var(--color-accent-rgb), 0.2);
    --color-accent-10: rgba(var(--color-accent-rgb), 0.1);
    
    /* ============================================
       WHITE TRANSPARENCIES
       ============================================ */
    --color-white-95: rgba(255, 255, 255, 0.95);
    --color-white-90: rgba(255, 255, 255, 0.9);
    --color-white-80: rgba(255, 255, 255, 0.8);
    --color-white-60: rgba(255, 255, 255, 0.6);
    --color-white-40: rgba(255, 255, 255, 0.4);
    --color-white-20: rgba(255, 255, 255, 0.2);
    --color-white-10: rgba(255, 255, 255, 0.1);
    
    /* ============================================
       BLACK TRANSPARENCIES (shadows)
       ============================================ */
    --color-black-35: rgba(0, 0, 0, 0.35);
    --color-black-25: rgba(0, 0, 0, 0.25);
    --color-black-15: rgba(0, 0, 0, 0.15);
    --color-black-10: rgba(0, 0, 0, 0.1);
    --color-black-08: rgba(0, 0, 0, 0.08);
    --color-black-05: rgba(0, 0, 0, 0.05);
    
    /* ============================================
       FUNCTIONAL COLORS
       ============================================ */
    --color-success: #27AE60;
    --color-success-light: #2ECC71;
    --color-warning: #F39C12;
    --color-error: #E74C3C;
    --color-error-dark: #C0392B;
    
    /* ============================================
       UI COLORS
       ============================================ */
    --color-border: #E0E0E0;
    --color-border-light: rgba(255, 255, 255, 0.2);
    
    /* ============================================
       LEGACY COMPATIBILITY
       For backwards compatibility with existing CSS
       ============================================ */
    --color-dark-green: var(--color-primary);
    --color-green-light: var(--color-primary-light);
    --color-purple: var(--color-secondary);
    --color-purple-light: var(--color-secondary);
    --color-orange-primary: var(--color-accent);
    --color-orange-secondary: var(--color-accent);
    --color-orange-light: var(--color-accent-light);
    --color-orange-lighter: var(--color-accent-light);
    --color-bg-white: #FFFFFF;
    --color-bg-offwhite: var(--color-background);
    --color-bg-light: var(--color-background);
    --color-bg-lighter: var(--color-background-alt);
    --color-text-white: #FFFFFF;
    --color-text-tertiary: var(--color-text-secondary);
    --color-text-quaternary: #999999;
    --color-text-light: var(--color-text-primary);
    
    /* Shadow colors mapped to new system */
    --color-shadow-dark: var(--color-black-35);
    --color-shadow-medium: var(--color-black-25);
    --color-shadow-light: var(--color-black-15);
    --color-shadow-very-light: var(--color-black-08);
    --color-shadow-green: rgba(var(--color-primary-rgb), 0.3);
    --color-shadow-purple: rgba(var(--color-secondary-rgb), 0.4);
    --color-shadow-orange: rgba(var(--color-accent-rgb), 0.4);
    
    /* Gradient colors mapped */
    --color-gradient-green-start: var(--color-primary);
    --color-gradient-green-middle: var(--color-primary-light);
    --color-gradient-green-end: var(--color-primary);
    --color-gradient-purple-start: var(--color-secondary);
    --color-gradient-purple-middle: rgba(var(--color-secondary-rgb), 0.95);
    --color-gradient-purple-light: rgba(var(--color-secondary-rgb), 0.8);
    --color-gradient-purple-end: var(--color-secondary);
    --color-gradient-orange-start: var(--color-accent);
    --color-gradient-orange-end: var(--color-accent-light);
    --color-gradient-gold-start: var(--color-accent);
    --color-gradient-gold-end: var(--color-accent-light);
    
    /* Hover states */
    --color-hover-orange: #D44A3F;
    --color-hover-orange-light: #E85A4F;
    --color-hover-purple: var(--color-secondary);
    --color-hover-green: var(--color-primary-light);
    
    /* Transparent color mappings for legacy support */
    --color-transparent-white-95: var(--color-white-95);
    --color-transparent-white-90: var(--color-white-90);
    --color-transparent-white-80: var(--color-white-80);
    --color-transparent-white-60: var(--color-white-60);
    --color-transparent-white-30: var(--color-white-40);
    --color-transparent-white-25: var(--color-white-40);
    --color-transparent-white-20: var(--color-white-20);
    --color-transparent-white-15: var(--color-white-20);
    --color-transparent-white-10: var(--color-white-10);
    --color-transparent-white-08: var(--color-white-10);
    --color-transparent-white-05: var(--color-black-05);
    
    --color-transparent-gold-90: var(--color-accent-90);
    --color-transparent-gold-50: var(--color-accent-60);
    --color-transparent-gold-40: var(--color-accent-40);
    --color-transparent-gold-30: var(--color-accent-40);
    --color-transparent-gold-20: var(--color-accent-20);
    --color-transparent-gold-15: var(--color-accent-20);
    --color-transparent-gold-10: var(--color-accent-10);
    
    --color-transparent-orange-90: var(--color-accent-90);
    --color-transparent-orange-60: var(--color-accent-60);
    --color-transparent-orange-50: var(--color-accent-60);
    --color-transparent-orange-40: var(--color-accent-40);
    --color-transparent-orange-30: var(--color-accent-40);
    --color-transparent-orange-25: var(--color-accent-20);
    --color-transparent-orange-20: var(--color-accent-20);
    --color-transparent-orange-10: var(--color-accent-10);
    
    --color-transparent-green-95: var(--color-primary-90);
    --color-transparent-green-90: var(--color-primary-90);
    --color-transparent-green-40: var(--color-primary-40);
    --color-transparent-green-30: var(--color-primary-40);
    --color-transparent-green-20: var(--color-primary-20);
    --color-transparent-green-10: var(--color-primary-10);
    
    --color-transparent-black-35: var(--color-black-35);
    --color-transparent-black-30: var(--color-black-35);
    --color-transparent-black-25: var(--color-black-25);
    --color-transparent-black-20: var(--color-black-25);
    --color-transparent-black-15: var(--color-black-15);
    --color-transparent-black-12: var(--color-black-15);
    --color-transparent-black-10: var(--color-black-10);
    --color-transparent-black-08: var(--color-black-08);
    --color-transparent-black-05: var(--color-black-05);
    
    --color-transparent-purple-95: var(--color-secondary-90);
    --color-transparent-purple-90: var(--color-secondary-90);
    --color-transparent-purple-40: var(--color-secondary-40);
    --color-transparent-purple-30: var(--color-secondary-40);
    --color-transparent-purple-25: var(--color-secondary-20);
    --color-transparent-purple-20: var(--color-secondary-20);
    --color-transparent-purple-10: var(--color-secondary-10);
    --color-transparent-purple-05: var(--color-secondary-10);
    
    --color-transparent-error-30: rgba(231, 76, 60, 0.3);
    --color-transparent-error-15: rgba(231, 76, 60, 0.15);
    --color-transparent-error-10: rgba(231, 76, 60, 0.1);
    
    --color-transparent-warning-10: rgba(243, 156, 18, 0.1);
    --color-transparent-success-10: rgba(46, 204, 113, 0.1);
}

/* ========================================
   TYPOGRAPHY
   ======================================== */
body {
    font-family: 'Inter', 'Lato', sans-serif;
    color: var(--color-text-primary);
    background-color: var(--color-background);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Playfair Display', 'Merriweather', serif;
    color: var(--color-text-primary);
}

/* ========================================
   COLOR UTILITY CLASSES
   ======================================== */
.bg-primary {
    background-color: var(--color-primary);
    color: var(--color-text-white);
}

.bg-secondary {
    background-color: var(--color-secondary);
    color: var(--color-text-white);
}

.bg-accent {
    background-color: var(--color-accent);
    color: var(--color-text-white);
}

.bg-background {
    background-color: var(--color-background);
    color: var(--color-text-primary);
}

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

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

.text-accent {
    color: var(--color-accent);
}

/* ========================================
   BUTTON STYLES
   ======================================== */
.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-text-white);
    border: 2px solid var(--color-primary);
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.btn-secondary {
    background-color: var(--color-accent);
    color: var(--color-text-white);
    border: 2px solid var(--color-accent);
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background-color: var(--color-hover-orange);
    border-color: var(--color-hover-orange);
}

.btn-outline {
    background-color: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-outline:hover {
    background-color: var(--color-primary);
    color: var(--color-text-white);
}

/* ========================================
   QUICK COLOR SWITCHER
   To change brand colors, update the variables
   in the :root section above, or use the
   WordPress Customizer (Appearance > Customize)
   ======================================== */

/* ========================================
   LEGACY COLOR FALLBACKS
   For backwards compatibility
   ======================================== */
:root {
    --cabbage-green: #7BAF6B;
    --clay-brown: #A67358;
    --warm-cream: #FFF7EC;
    --jar-blue-grey: #6F7B7D;
    --accent-mustard: #E2B659;
}