/**
 * Boost Theme Framework - Variation Patterns
 * 
 * CSS Variables for 4 theme variations: light, dark, gradient, muted
 * 34 properties × 4 variations = 136 total CSS custom properties
 * 
 * @package BoostThemeFramework
 */

/* /assets/css/variation-patterns.css */

/* ========================================
   ROOT FALLBACK (Default = Light Theme)
   Applied when no data-variation attribute
   ======================================== */
:root {
    /* Core Colors */
    --boost-bg: #ffffff;
    --boost-text: #0f172a;
    --boost-muted: #475569;
    --boost-border: #e2e8f0;
    --boost-accent: #6D28D9;
    
    /* Cards */
    --boost-card-bg: #ffffff;
    --boost-card-border: #e2e8f0;
    --boost-card-shadow: 0 4px 20px rgba(0,0,0,0.08);
    --boost-card-hover-bg: #f8fafc;
    
    /* Icons */
    --boost-icon-bg: #f1f5f9;
    --boost-icon-color: #2563eb;
    --boost-icon-border: #2563eb;
    
    /* Badges */
    --boost-badge-bg: rgba(79,70,229,0.1);
    --boost-badge-text: var(--boost-primary, #2563eb);
    --boost-badge-border: var(--boost-primary, #2563eb);
    
    /* Buttons Primary */
    --boost-btn-primary-bg: linear-gradient(135deg, var(--boost-primary, #2563eb), var(--boost-accent, #3b82f6));
    --boost-btn-primary-text: #ffffff;
    --boost-btn-primary-hover-bg: linear-gradient(135deg, #6D28D9, #DB2777);
    --boost-btn-primary-shadow: 0 10px 30px rgba(79,70,229,0.3);
    
    /* Buttons Secondary */
    --boost-btn-secondary-bg: transparent;
    --boost-btn-secondary-text: var(--boost-primary, #2563eb);
    --boost-btn-secondary-border: var(--boost-primary, #2563eb);
    --boost-btn-secondary-hover-bg: rgba(79,70,229,0.1);
    
    /* Stats/Values */
    --boost-value-color: #0f172a;
    --boost-label-color: #64748b;
    
    /* Progress */
    --boost-progress-bg: #e2e8f0;
    --boost-progress-fill: linear-gradient(135deg, var(--boost-primary, #2563eb), var(--boost-accent, #3b82f6));
    
    /* Toggles */
    --boost-toggle-bg: #e2e8f0;
    --boost-toggle-active: var(--boost-primary, #2563eb);
    --boost-toggle-text: #0f172a;
    
    /* Checkmarks */
    --boost-check-color: #10b981;
    --boost-check-bg: #d1fae5;
    
    /* Featured */
    --boost-featured-bg: #fdf4ff;
    --boost-featured-text: var(--boost-primary, #2563eb);
    --boost-featured-border: #e9d5ff;
}

/* ========================================
   LIGHT VARIATION
   ======================================== */
[data-variation="light"] {
    /* Core Colors */
    --boost-bg: #ffffff;
    --boost-text: #0f172a;
    --boost-muted: #475569;
    --boost-border: #e2e8f0;
    --boost-accent: #6D28D9;
    
    /* Cards */
    --boost-card-bg: #ffffff;
    --boost-card-border: #e2e8f0;
    --boost-card-shadow: 0 4px 20px rgba(0,0,0,0.08);
    --boost-card-hover-bg: #f8fafc;
    
    /* Icons */
    --boost-icon-bg: #f1f5f9;
    --boost-icon-color: #2563eb;
    --boost-icon-border: #2563eb;
    
    /* Badges */
    --boost-badge-bg: rgba(79,70,229,0.1);
    --boost-badge-text: var(--boost-primary, #2563eb);
    --boost-badge-border: var(--boost-primary, #2563eb);
    
    /* Buttons Primary */
    --boost-btn-primary-bg: linear-gradient(135deg, var(--boost-primary, #2563eb), var(--boost-accent, #3b82f6));
    --boost-btn-primary-text: #ffffff;
    --boost-btn-primary-hover-bg: linear-gradient(135deg, #6D28D9, #DB2777);
    --boost-btn-primary-shadow: 0 10px 30px rgba(79,70,229,0.3);
    
    /* Buttons Secondary */
    --boost-btn-secondary-bg: transparent;
    --boost-btn-secondary-text: var(--boost-primary, #2563eb);
    --boost-btn-secondary-border: var(--boost-primary, #2563eb);
    --boost-btn-secondary-hover-bg: rgba(79,70,229,0.1);
    
    /* Stats/Values */
    --boost-value-color: #0f172a;
    --boost-label-color: #64748b;
    
    /* Progress */
    --boost-progress-bg: #e2e8f0;
    --boost-progress-fill: linear-gradient(135deg, var(--boost-primary, #2563eb), var(--boost-accent, #3b82f6));
    
    /* Toggles */
    --boost-toggle-bg: #e2e8f0;
    --boost-toggle-active: var(--boost-primary, #2563eb);
    --boost-toggle-text: #0f172a;
    
    /* Checkmarks */
    --boost-check-color: #10b981;
    --boost-check-bg: #d1fae5;
    
    /* Featured */
    --boost-featured-bg: #fdf4ff;
    --boost-featured-text: var(--boost-primary, #2563eb);
    --boost-featured-border: #e9d5ff;
}

/* ========================================
   DARK VARIATION
   ======================================== */
[data-variation="dark"] {
    /* Core Colors */
    --boost-bg: linear-gradient(135deg, #0F0F0F, #1a1a2e, #16213e);
    --boost-text: #ffffff;
    --boost-muted: #cbd5e1;
    --boost-border: rgba(255,255,255,0.1);
    --boost-accent: #a78bfa;
    
    /* Cards */
    --boost-card-bg: rgba(15, 23, 42, 0.8);
    --boost-card-border: rgba(255,255,255,0.1);
    --boost-card-shadow: 0 8px 32px rgba(0,0,0,0.3);
    --boost-card-hover-bg: rgba(30, 41, 59, 0.9);
    
    /* Icons */
    --boost-icon-bg: rgba(37, 99, 235, 0.15);
    --boost-icon-color: #a78bfa;
    --boost-icon-border: #a78bfa;
    
    /* Badges */
    --boost-badge-bg: rgba(167, 139, 250, 0.15);
    --boost-badge-text: #c4b5fd;
    --boost-badge-border: #a78bfa;
    
    /* Buttons Primary */
    --boost-btn-primary-bg: linear-gradient(135deg, var(--boost-primary, #2563eb), var(--boost-accent, #3b82f6));
    --boost-btn-primary-text: #ffffff;
    --boost-btn-primary-hover-bg: linear-gradient(135deg, #8B5CF6, #F472B6);
    --boost-btn-primary-shadow: 0 10px 40px rgba(79,70,229,0.4);
    
    /* Buttons Secondary */
    --boost-btn-secondary-bg: rgba(255,255,255,0.1);
    --boost-btn-secondary-text: #ffffff;
    --boost-btn-secondary-border: rgba(255,255,255,0.2);
    --boost-btn-secondary-hover-bg: rgba(255,255,255,0.15);
    
    /* Stats/Values */
    --boost-value-color: #ffffff;
    --boost-label-color: #94a3b8;
    
    /* Progress */
    --boost-progress-bg: rgba(255,255,255,0.1);
    --boost-progress-fill: linear-gradient(135deg, var(--boost-primary, #2563eb), var(--boost-accent, #3b82f6));
    
    /* Toggles */
    --boost-toggle-bg: rgba(255,255,255,0.1);
    --boost-toggle-active: #a78bfa;
    --boost-toggle-text: #ffffff;
    
    /* Checkmarks */
    --boost-check-color: #34d399;
    --boost-check-bg: rgba(52, 211, 153, 0.15);
    
    /* Featured */
    --boost-featured-bg: rgba(var(--boost-primary-rgb, 37, 99, 235), 0.1);
    --boost-featured-text: #c4b5fd;
    --boost-featured-border: rgba(167, 139, 250, 0.3);
}

/* ========================================
   GRADIENT VARIATION
   ======================================== */
[data-variation="gradient"] {
    /* Core Colors */
    --boost-bg: linear-gradient(135deg, #667eea, #764ba2);
    --boost-text: #ffffff;
    --boost-muted: rgba(255,255,255,0.8);
    --boost-border: rgba(255,255,255,0.2);
    --boost-accent: #fbbf24;
    
    /* Cards */
    --boost-card-bg: rgba(255,255,255,0.15);
    --boost-card-border: rgba(255,255,255,0.2);
    --boost-card-shadow: 0 8px 32px rgba(0,0,0,0.2);
    --boost-card-hover-bg: rgba(255,255,255,0.25);
    
    /* Icons */
    --boost-icon-bg: rgba(255,255,255,0.2);
    --boost-icon-color: #ffffff;
    --boost-icon-border: rgba(255,255,255,0.3);
    
    /* Badges */
    --boost-badge-bg: rgba(255,255,255,0.2);
    --boost-badge-text: #ffffff;
    --boost-badge-border: rgba(255,255,255,0.3);
    
    /* Buttons Primary */
    --boost-btn-primary-bg: #ffffff;
    --boost-btn-primary-text: #667eea;
    --boost-btn-primary-hover-bg: rgba(255,255,255,0.9);
    --boost-btn-primary-shadow: 0 10px 40px rgba(0,0,0,0.2);
    
    /* Buttons Secondary */
    --boost-btn-secondary-bg: rgba(255,255,255,0.15);
    --boost-btn-secondary-text: #ffffff;
    --boost-btn-secondary-border: rgba(255,255,255,0.3);
    --boost-btn-secondary-hover-bg: rgba(255,255,255,0.25);
    
    /* Stats/Values */
    --boost-value-color: #ffffff;
    --boost-label-color: rgba(255,255,255,0.8);
    
    /* Progress */
    --boost-progress-bg: rgba(255,255,255,0.2);
    --boost-progress-fill: #fbbf24;
    
    /* Toggles */
    --boost-toggle-bg: rgba(255,255,255,0.2);
    --boost-toggle-active: #fbbf24;
    --boost-toggle-text: #ffffff;
    
    /* Checkmarks */
    --boost-check-color: #10b981;
    --boost-check-bg: rgba(16, 185, 129, 0.2);
    
    /* Featured */
    --boost-featured-bg: rgba(255,255,255,0.2);
    --boost-featured-text: #ffffff;
    --boost-featured-border: rgba(255,255,255,0.3);
}

/* ========================================
   MUTED VARIATION
   ======================================== */
[data-variation="muted"] {
    /* Core Colors */
    --boost-bg: #f8fafc;
    --boost-text: #0f172a;
    --boost-muted: #475569;
    --boost-border: #cbd5e1;
    --boost-accent: var(--boost-primary, #2563eb);
    
    /* Cards */
    --boost-card-bg: #ffffff;
    --boost-card-border: #e2e8f0;
    --boost-card-shadow: 0 2px 12px rgba(15,23,42,0.06);
    --boost-card-hover-bg: #f1f5f9;
    
    /* Icons */
    --boost-icon-bg: #f3e8ff;
    --boost-icon-color: #2563eb;
    --boost-icon-border: #2563eb;
    
    /* Badges */
    --boost-badge-bg: #f3e8ff;
    --boost-badge-text: #6D28D9;
    --boost-badge-border: var(--boost-primary, #2563eb);
    
    /* Buttons Primary */
    --boost-btn-primary-bg: linear-gradient(135deg, var(--boost-primary, #2563eb), var(--boost-accent, #3b82f6));
    --boost-btn-primary-text: #ffffff;
    --boost-btn-primary-hover-bg: linear-gradient(135deg, #6D28D9, #DB2777);
    --boost-btn-primary-shadow: 0 4px 16px rgba(79,70,229,0.25);
    
    /* Buttons Secondary */
    --boost-btn-secondary-bg: transparent;
    --boost-btn-secondary-text: #0ea5e9;
    --boost-btn-secondary-border: #0ea5e9;
    --boost-btn-secondary-hover-bg: #e0f2fe;
    
    /* Stats/Values */
    --boost-value-color: #0f172a;
    --boost-label-color: #64748b;
    
    /* Progress */
    --boost-progress-bg: #e2e8f0;
    --boost-progress-fill: #0ea5e9;
    
    /* Toggles */
    --boost-toggle-bg: #cbd5e1;
    --boost-toggle-active: #0ea5e9;
    --boost-toggle-text: #0f172a;
    
    /* Checkmarks */
    --boost-check-color: #059669;
    --boost-check-bg: #d1fae5;
    
    /* Featured */
    --boost-featured-bg: #f0f9ff;
    --boost-featured-text: #0369a1;
    --boost-featured-border: #bae6fd;
}

/* ==========================================================================
   GLOBAL CTA BUTTON STYLES
   Consistent button appearance across all blocks
   ========================================================================== */

.boost-btn-primary,
.cta-btn-primary,
.slide-cta,
a[class*="cta-btn"],
button[class*="cta-btn"] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, var(--boost-primary, #2563eb) 0%, var(--boost-accent, #3b82f6) 100%);
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.05rem;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(var(--boost-primary-rgb, 37, 99, 235), 0.4);
    -webkit-font-smoothing: antialiased;
}

.boost-btn-primary:hover,
.cta-btn-primary:hover,
.slide-cta:hover,
a[class*="cta-btn"]:hover,
button[class*="cta-btn"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(var(--boost-primary-rgb, 37, 99, 235), 0.5);
    background: linear-gradient(135deg, #6D28D9 0%, #DB2777 100%);
}