/* Coffee Blog Theme - Color Palette Library */

/* ========================================
   COFFEE-INSPIRED COLOR PALETTES
   Choose the palette that best matches your theme.png
   ======================================== */

/* Palette 1: Classic Coffee (Current Default) */
:root.palette-classic {
    --primary-color: #8B4513;        /* Saddle Brown */
    --secondary-color: #D2B48C;      /* Tan */
    --text-color: #2c1810;           /* Dark Brown */
    --background-color: #ffffff;     /* White */
    --accent-color: #CD853F;         /* Peru */
    --light-bg: #f5f5f5;            /* Light Gray */
    --border-color: #e0e0e0;         /* Light Border */
    --success-color: #4CAF50;        /* Green */
    --warning-color: #FF9800;        /* Orange */
    --error-color: #F44336;          /* Red */
}

/* Palette 2: Dark Roast */
:root.palette-dark {
    --primary-color: #3C2415;        /* Dark Coffee */
    --secondary-color: #8B4513;      /* Medium Brown */
    --text-color: #1a1a1a;           /* Almost Black */
    --background-color: #faf9f7;     /* Cream White */
    --accent-color: #D2691E;         /* Chocolate */
    --light-bg: #f0efed;            /* Light Cream */
    --border-color: #d4d4d4;         /* Medium Border */
    --success-color: #28a745;        /* Forest Green */
    --warning-color: #fd7e14;        /* Burnt Orange */
    --error-color: #dc3545;          /* Deep Red */
}

/* Palette 3: Light Roast */
:root.palette-light {
    --primary-color: #C8860D;        /* Golden Brown */
    --secondary-color: #F4E4C1;      /* Light Beige */
    --text-color: #5D4037;           /* Medium Brown */
    --background-color: #FFFEF7;     /* Ivory */
    --accent-color: #FF8C42;         /* Warm Orange */
    --light-bg: #f9f7f4;            /* Very Light Beige */
    --border-color: #e8e2d5;         /* Soft Border */
    --success-color: #66BB6A;        /* Soft Green */
    --warning-color: #FFA726;        /* Amber */
    --error-color: #EF5350;          /* Coral Red */
}

/* Palette 4: Espresso */
:root.palette-espresso {
    --primary-color: #6F4E37;        /* Coffee Bean */
    --secondary-color: #A0522D;      /* Sienna */
    --text-color: #2F1B14;           /* Dark Espresso */
    --background-color: #FFF8E7;     /* Light Cream */
    --accent-color: #B8860B;         /* Dark Goldenrod */
    --light-bg: #f5f1e8;            /* Warm Cream */
    --border-color: #ddd6c7;         /* Warm Border */
    --success-color: #388E3C;        /* Dark Green */
    --warning-color: #F57C00;        /* Dark Orange */
    --error-color: #D32F2F;          /* Dark Red */
}

/* Palette 5: Modern Coffee */
:root.palette-modern {
    --primary-color: #795548;        /* Brown */
    --secondary-color: #BCAAA4;      /* Light Brown */
    --text-color: #424242;           /* Dark Gray */
    --background-color: #FAFAFA;     /* Light Gray */
    --accent-color: #FF7043;         /* Deep Orange */
    --light-bg: #f0f0f0;            /* Medium Light Gray */
    --border-color: #e0e0e0;         /* Standard Border */
    --success-color: #4CAF50;        /* Material Green */
    --warning-color: #FF9800;        /* Material Orange */
    --error-color: #F44336;          /* Material Red */
}

/* Palette 6: Cafe Latte */
:root.palette-latte {
    --primary-color: #A0745B;        /* Latte Brown */
    --secondary-color: #E6D3C7;      /* Light Latte */
    --text-color: #4A2C2A;           /* Dark Mocha */
    --background-color: #FFFEFA;     /* Off White */
    --accent-color: #D4A574;         /* Caramel */
    --light-bg: #f7f4f1;            /* Very Light Latte */
    --border-color: #e5ddd6;         /* Latte Border */
    --success-color: #689F38;        /* Olive Green */
    --warning-color: #FF8F00;        /* Amber Orange */
    --error-color: #E53935;          /* Warm Red */
}

/* ========================================
   COFFEE TYPOGRAPHY COMBINATIONS
   Choose fonts that match your design aesthetic
   ======================================== */

/* Typography Set 1: Classic Elegant */
.typography-classic {
    --heading-font: 'Playfair Display', serif;
    --subheading-font: 'Lora', serif;
    --body-font: 'Inter', sans-serif;
    --accent-font: 'Dancing Script', cursive;
    --mono-font: 'Source Code Pro', monospace;
}

/* Typography Set 2: Modern Clean */
.typography-modern {
    --heading-font: 'Oswald', sans-serif;
    --subheading-font: 'Roboto', sans-serif;
    --body-font: 'Open Sans', sans-serif;
    --accent-font: 'Pacifico', cursive;
    --mono-font: 'Roboto Mono', monospace;
}

/* Typography Set 3: Rustic Coffee Shop */
.typography-rustic {
    --heading-font: 'Merriweather', serif;
    --subheading-font: 'Crimson Text', serif;
    --body-font: 'Nunito', sans-serif;
    --accent-font: 'Kaushan Script', cursive;
    --mono-font: 'PT Mono', monospace;
}

/* Typography Set 4: Minimal Contemporary */
.typography-minimal {
    --heading-font: 'Montserrat', sans-serif;
    --subheading-font: 'Source Sans Pro', sans-serif;
    --body-font: 'Lato', sans-serif;
    --accent-font: 'Satisfy', cursive;
    --mono-font: 'Inconsolata', monospace;
}

/* Typography Set 5: Bold & Expressive */
.typography-bold {
    --heading-font: 'Bebas Neue', cursive;
    --subheading-font: 'Raleway', sans-serif;
    --body-font: 'Muli', sans-serif;
    --accent-font: 'Amatic SC', cursive;
    --mono-font: 'Space Mono', monospace;
}

/* Typography Set 6: Luxury Coffee Brand */
.typography-luxury {
    --heading-font: 'Cormorant Garamond', serif;
    --subheading-font: 'EB Garamond', serif;
    --body-font: 'Source Sans Pro', sans-serif;
    --accent-font: 'Alex Brush', cursive;
    --mono-font: 'Fira Code', monospace;
}

/* ========================================
   APPLICATION CLASSES
   Apply to <html> or <body> element
   ======================================== */

/* Color Applications */
.palette-classic .header { background: var(--background-color); }
.palette-classic .logo-link { color: var(--text-color); }
.palette-classic .logo-link i { color: var(--primary-color); }
.palette-classic .nav-link:hover { color: var(--primary-color); }
.palette-classic .hero { background: linear-gradient(135deg, var(--light-bg) 0%, var(--background-color) 100%); }
.palette-classic .hero-title { color: var(--text-color); }
.palette-classic .cta-button { background: var(--primary-color); }
.palette-classic .cta-button:hover { background: var(--accent-color); }
.palette-classic .section-title { color: var(--text-color); }
.palette-classic .post-category { background: var(--primary-color); }
.palette-classic .read-more { color: var(--primary-color); }
.palette-classic .footer { 
    background: var(--text-color); 
    color: #ffffff;
}
.palette-classic .footer-section h4 {
    color: var(--secondary-color);
    font-weight: 600;
}
.palette-classic .footer-section p,
.palette-classic .footer-section a {
    color: #e0e0e0;
}
.palette-classic .footer-section a:hover {
    color: var(--secondary-color);
}
.palette-classic .footer-bottom {
    color: #e0e0e0;
    border-top-color: #555;
}
.palette-classic .social-links a {
    background: var(--primary-color);
    color: #ffffff;
}
.palette-classic .social-links a:hover {
    background: var(--secondary-color);
}

/* Typography Applications */
.typography-classic h1, .typography-classic h2, .typography-classic h3 { font-family: var(--heading-font); }
.typography-classic h4, .typography-classic h5, .typography-classic h6 { font-family: var(--subheading-font); }
.typography-classic body, .typography-classic p, .typography-classic div { font-family: var(--body-font); }
.typography-classic .accent-text { font-family: var(--accent-font); }
.typography-classic code, .typography-classic pre { font-family: var(--mono-font); }

/* ========================================
   QUICK IMPLEMENTATION GUIDE
   ======================================== */

/*
To apply a specific combination:

1. Add classes to your HTML <html> tag:
   <html class="palette-classic typography-classic">

2. Or mix and match:
   <html class="palette-dark typography-modern">

3. Available combinations:
   - palette-classic + typography-classic (Current default)
   - palette-dark + typography-rustic (Coffee shop vibe)
   - palette-light + typography-modern (Fresh and clean)
   - palette-espresso + typography-luxury (Premium feel)
   - palette-modern + typography-minimal (Contemporary)
   - palette-latte + typography-bold (Unique and expressive)

4. Google Fonts links needed (add to <head>):
   <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@400;500;600&family=Dancing+Script:wght@400;700&display=swap" rel="stylesheet">
*/

/* ========================================
   CUSTOMIZATION EXAMPLES
   ======================================== */

/* Example: If your theme.png shows purple and gold */
:root.palette-custom {
    --primary-color: #6A1B9A;        /* Purple */
    --secondary-color: #FFD700;      /* Gold */
    --text-color: #2E2E2E;           /* Dark Gray */
    --background-color: #FFFFFF;     /* White */
    --accent-color: #AB47BC;         /* Light Purple */
}

/* ========================================
   COMPREHENSIVE FOOTER STYLING FOR ALL PALETTES
   Ensures readability and proper contrast
   ======================================== */

/* Dark Palette Footer */
.palette-dark .footer {
    background: var(--primary-color);
    color: #ffffff;
}
.palette-dark .footer-section h4 {
    color: var(--secondary-color);
    font-weight: 600;
}
.palette-dark .footer-section p,
.palette-dark .footer-section a {
    color: #f0f0f0;
}
.palette-dark .footer-section a:hover {
    color: var(--accent-color);
}
.palette-dark .footer-bottom {
    color: #f0f0f0;
    border-top-color: rgba(255,255,255,0.2);
}
.palette-dark .social-links a {
    background: var(--secondary-color);
    color: #ffffff;
}
.palette-dark .social-links a:hover {
    background: var(--accent-color);
}

/* Light Palette Footer */
.palette-light .footer {
    background: var(--text-color);
    color: #ffffff;
}
.palette-light .footer-section h4 {
    color: var(--secondary-color);
    font-weight: 600;
}
.palette-light .footer-section p,
.palette-light .footer-section a {
    color: #e8e8e8;
}
.palette-light .footer-section a:hover {
    color: var(--accent-color);
}
.palette-light .footer-bottom {
    color: #e8e8e8;
    border-top-color: #666;
}
.palette-light .social-links a {
    background: var(--primary-color);
    color: #ffffff;
}
.palette-light .social-links a:hover {
    background: var(--accent-color);
}

/* Espresso Palette Footer */
.palette-espresso .footer {
    background: var(--text-color);
    color: #ffffff;
}
.palette-espresso .footer-section h4 {
    color: var(--accent-color);
    font-weight: 600;
}
.palette-espresso .footer-section p,
.palette-espresso .footer-section a {
    color: #e5e5e5;
}
.palette-espresso .footer-section a:hover {
    color: var(--secondary-color);
}
.palette-espresso .footer-bottom {
    color: #e5e5e5;
    border-top-color: #777;
}
.palette-espresso .social-links a {
    background: var(--primary-color);
    color: #ffffff;
}
.palette-espresso .social-links a:hover {
    background: var(--accent-color);
}

/* Modern Palette Footer */
.palette-modern .footer {
    background: var(--text-color);
    color: #ffffff;
}
.palette-modern .footer-section h4 {
    color: var(--secondary-color);
    font-weight: 600;
}
.palette-modern .footer-section p,
.palette-modern .footer-section a {
    color: #e0e0e0;
}
.palette-modern .footer-section a:hover {
    color: var(--accent-color);
}
.palette-modern .footer-bottom {
    color: #e0e0e0;
    border-top-color: #666;
}
.palette-modern .social-links a {
    background: var(--primary-color);
    color: #ffffff;
}
.palette-modern .social-links a:hover {
    background: var(--accent-color);
}

/* Latte Palette Footer */
.palette-latte .footer {
    background: var(--text-color);
    color: #ffffff;
}
.palette-latte .footer-section h4 {
    color: var(--accent-color);
    font-weight: 600;
}
.palette-latte .footer-section p,
.palette-latte .footer-section a {
    color: #e8e8e8;
}
.palette-latte .footer-section a:hover {
    color: var(--secondary-color);
}
.palette-latte .footer-bottom {
    color: #e8e8e8;
    border-top-color: #666;
}
.palette-latte .social-links a {
    background: var(--primary-color);
    color: #ffffff;
}
.palette-latte .social-links a:hover {
    background: var(--accent-color);
}