/**
 * Mystic Elementor Widgets - Color System
 * This file defines the comprehensive color variable system that integrates with Elementor Global Colors
 * All widgets should reference these variables instead of hardcoded values
 */

/* ============================================
   ELEMENTOR GLOBAL COLOR INTEGRATION
   ============================================ */

.elementor-kit-10, .elementor-kit-11, .elementor-kit-12, .elementor-kit-13, .elementor-kit-14, .elementor-kit-15, .elementor-kit-16, .elementor-kit-17, .elementor-kit-18, .elementor-kit-19, .elementor-kit-20, .elementor-kit-88, [class*="elementor-kit-"] {
    /* ============================================
       PRIMARY BRAND COLORS
       ============================================ */
    --mystic-primary: var(--e-global-color-primary, #6EC1E4);
    --mystic-secondary: var(--e-global-color-secondary, #54595F);
    --mystic-accent: var(--e-global-color-accent, #61CE70);
    --mystic-text: var(--e-global-color-text, #7A7A7A);

    /* ============================================
       BRAND COLORS - Maps to existing brand colors
       ============================================ */
    --mystic-brand-yellow: var(--e-global-color-7ae1c95, #fed000);
    --mystic-brand-blue: var(--e-global-color-819a535, #13496a);
    --mystic-brand-brown: var(--e-global-color-fb5cce0, #431b05);
    --mystic-brand-yellow-alt: var(--e-global-color-alt, #fefbec);
    --mystic-blue-600: var(--e-global-color-51343bb, #0f7eba);

    /* ============================================
       TEXT COLORS - Replaces hardcoded #141414 variations
       ============================================ */
    --mystic-text-dark: var(--e-global-color-d549ef4, #141414);
    --mystic-text-medium: var(--e-global-color-0d5860f, rgba(20, 20, 20, 0.75));
    --mystic-text-light: var(--e-global-color-68e4f78, rgba(20, 20, 20, 0.60));
    --mystic-text-subtle: var(--e-global-color-2abcfaa, rgba(20, 20, 20, 0.45));
    --mystic-text-disabled: var(--e-global-color-845cb92, rgba(20, 20, 20, 0.30));

    /* ============================================
       BACKGROUND COLORS
       ============================================ */
    --mystic-bg-white: var(--e-global-color-1816f45, #ffffff);
    --mystic-bg-light: var(--e-global-color-e50a440, #f9fafb);
    --mystic-bg-gray-50: var(--e-global-color-6b5d419, #f8fafc);
    --mystic-bg-gray-100: var(--e-global-color-26c1755, #f1f5f9);

    /* ============================================
       SECTION BADGE COLORS - Configurable variants
       ============================================ */
    --mystic-postal-bg: var(--e-global-color-1fc7cad, #dfcfff);
    --mystic-postal-text: var(--e-global-color-12761f1, #5c2dd0);
    --mystic-federal-bg: var(--e-global-color-62a8ae5, #ffcfff);
    --mystic-federal-text: var(--e-global-color-f9636f0, #d02dd0);
    --mystic-hbr-bg: var(--e-global-color-387cdec, #cfe7ff);
    --mystic-hbr-text: var(--e-global-color-46c8fe9, #007aff);
    --mystic-healthcare-bg: var(--e-global-color-b2607db, #ffcfcf);
    --mystic-healthcare-text: var(--e-global-color-06cbffb, #d02323);
    --mystic-section-bg: var(--e-global-color-d9fa151, #12b56c);
    --mystic-section-text: var(--e-global-color-07f66aa, #d3ffe4);

    /* ============================================
       BORDER COLORS - Replaces hardcoded rgba values
       ============================================ */
    --mystic-border-light: var(--e-global-color-7043d8b, rgba(20, 20, 20, 0.10));
    --mystic-border-medium: var(--e-global-color-ad78708, rgba(20, 20, 20, 0.20));
    --mystic-border-dark: var(--e-global-color-2abcfaa, rgba(20, 20, 20, 0.30));

    /* ============================================
       SHADOW COLORS - Replaces hardcoded shadow rgba values
       ============================================ */
    --mystic-shadow-light: var(--e-global-color-05789b8, rgba(0, 0, 0, 0.05));
    --mystic-shadow-medium: var(--e-global-color-ce996a7, rgba(0, 0, 0, 0.10));
    --mystic-shadow-dark: var(--e-global-color-b22fb14, rgba(0, 0, 0, 0.15));

    /* ============================================
       STATE COLORS - Success, Warning, Error, Info
       ============================================ */
    --mystic-success: var(--e-global-color-d9fa151, #12b56c);
    --mystic-success-light: var(--e-global-color-07f66aa, #d3ffe4);
    --mystic-warning: var(--e-global-color-ae45688, #b0540d);
    --mystic-warning-light: var(--e-global-color-994eb83, #fefbec);
    --mystic-error: var(--e-global-color-06cbffb, #d02323);
    --mystic-error-light: var(--e-global-color-b2607db, #ffcfcf);
    --mystic-info: var(--e-global-color-46c8fe9, #007aff);
    --mystic-info-light: var(--e-global-color-387cdec, #cfe7ff);

    /* ============================================
       TYPOGRAPHY COLORS - For different text hierarchies
       ============================================ */
    --mystic-heading-color: var(--mystic-text-dark);
    --mystic-subheading-color: var(--mystic-text-medium);
    --mystic-body-color: var(--mystic-text-light);
    --mystic-caption-color: var(--mystic-text-subtle);

    /* ============================================
       COMPONENT-SPECIFIC COLORS
       ============================================ */
    
    /* Button Colors */
    --mystic-btn-primary-bg: var(--mystic-brand-yellow);
    --mystic-btn-primary-text: var(--mystic-brand-brown);
    --mystic-btn-secondary-bg: var(--mystic-brand-blue);
    --mystic-btn-secondary-text: var(--mystic-bg-white);
    --mystic-btn-outline-border: var(--mystic-brand-blue);
    --mystic-btn-outline-text: var(--mystic-brand-blue);

    /* Card Colors */
    --mystic-card-bg: var(--mystic-bg-white);
    --mystic-card-border: var(--mystic-border-light);
    --mystic-card-shadow: var(--mystic-shadow-light);

    /* Input Colors */
    --mystic-input-bg: var(--mystic-bg-white);
    --mystic-input-border: var(--mystic-border-medium);
    --mystic-input-focus-border: var(--mystic-brand-blue);
    --mystic-input-text: var(--mystic-text-dark);

    /* Link Colors */
    --mystic-link-color: var(--mystic-brand-blue);
    --mystic-link-hover-color: var(--mystic-blue-600);

    /* ============================================
       FONT FAMILY - Integrates with Elementor Typography
       ============================================ */
    --mystic-font-family: var(--e-global-typography-primary-font-family, "Public Sans"), 
                          var(--e-global-typography-2d573f7-font-family, "Public Sans"), 
                          -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* ============================================
   LEGACY SUPPORT - Maintains backward compatibility
   ============================================ */

.elementor-kit-10, .elementor-kit-11, .elementor-kit-12, .elementor-kit-13, .elementor-kit-14, .elementor-kit-15, .elementor-kit-16, .elementor-kit-17, .elementor-kit-18, .elementor-kit-19, .elementor-kit-20, .elementor-kit-88, [class*="elementor-kit-"] {
    /* Keep existing variables for backward compatibility while transitioning */
    --brand-yellow: var(--mystic-brand-yellow);
    --brand-blue: var(--mystic-brand-blue);
    --brand-brown: var(--mystic-brand-brown);
    --brand-yellow-alt: var(--mystic-brand-yellow-alt);
    --blue-600: var(--mystic-blue-600);
    --postal-bg: var(--mystic-postal-bg);
    --postal-text: var(--mystic-postal-text);
    --federal-bg: var(--mystic-federal-bg);
    --federal-text: var(--mystic-federal-text);
    --hbr-bg: var(--mystic-hbr-bg);
    --hbr-text: var(--mystic-hbr-text);
    --healthcare-bg: var(--mystic-healthcare-bg);
    --healthcare-text: var(--mystic-healthcare-text);
    --section-bg: var(--mystic-section-bg);
    --section-text: var(--mystic-section-text);
    --font-public-sans: var(--mystic-font-family);
}

/* ============================================
   UTILITY CLASSES - For common color applications
   ============================================ */

/* Text Color Utilities */
.mystic-text-dark { color: var(--mystic-text-dark) !important; }
.mystic-text-medium { color: var(--mystic-text-medium) !important; }
.mystic-text-light { color: var(--mystic-text-light) !important; }
.mystic-text-subtle { color: var(--mystic-text-subtle) !important; }
.mystic-text-brand { color: var(--mystic-brand-blue) !important; }
.mystic-text-success { color: var(--mystic-success) !important; }
.mystic-text-warning { color: var(--mystic-warning) !important; }
.mystic-text-error { color: var(--mystic-error) !important; }
.mystic-text-info { color: var(--mystic-info) !important; }

/* Background Color Utilities */
.mystic-bg-white { background-color: var(--mystic-bg-white) !important; }
.mystic-bg-light { background-color: var(--mystic-bg-light) !important; }
.mystic-bg-brand { background-color: var(--mystic-brand-yellow) !important; }
.mystic-bg-success { background-color: var(--mystic-success-light) !important; }
.mystic-bg-warning { background-color: var(--mystic-warning-light) !important; }
.mystic-bg-error { background-color: var(--mystic-error-light) !important; }
.mystic-bg-info { background-color: var(--mystic-info-light) !important; }

/* Border Color Utilities */
.mystic-border-light { border-color: var(--mystic-border-light) !important; }
.mystic-border-medium { border-color: var(--mystic-border-medium) !important; }
.mystic-border-dark { border-color: var(--mystic-border-dark) !important; }
.mystic-border-brand { border-color: var(--mystic-brand-blue) !important; }

/* ============================================
   LABEL COMPONENT STYLES - Using Color System
   ============================================ */

.mystic-label-component {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 100px;
    font-family: var(--mystic-font-family);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.2px;
    text-transform: uppercase;
}

/* Variant-specific styles using CSS variables */
.mystic-label--federal {
    color: var(--mystic-federal-text);
    background-color: var(--mystic-federal-bg);
}

.mystic-label--success {
    color: var(--mystic-success);
    background-color: var(--mystic-success-light);
}

.mystic-label--info {
    color: var(--mystic-info);
    background-color: var(--mystic-info-light);
}

.mystic-label--postal {
    color: var(--mystic-postal-text);
    background-color: var(--mystic-postal-bg);
}

/* Additional label variants for comprehensive coverage */
.mystic-label--healthcare {
    color: var(--mystic-healthcare-text);
    background-color: var(--mystic-healthcare-bg);
}

.mystic-label--hbr {
    color: var(--mystic-hbr-text);
    background-color: var(--mystic-hbr-bg);
}

.mystic-label--warning {
    color: var(--mystic-warning);
    background-color: var(--mystic-warning-light);
}

.mystic-label--error {
    color: var(--mystic-error);
    background-color: var(--mystic-error-light);
}

/* ============================================
   PRESET CLASSES - For standardized styling
   ============================================ */

/* Primary Brand Preset */
.mystic-preset--primary {
    color: var(--mystic-bg-white);
    background-color: var(--mystic-brand-blue);
    border-color: var(--mystic-brand-blue);
}

.mystic-preset--primary:hover {
    background-color: var(--mystic-blue-600);
    border-color: var(--mystic-blue-600);
}

/* Secondary Brand Preset */
.mystic-preset--secondary {
    color: var(--mystic-brand-brown);
    background-color: var(--mystic-brand-yellow);
    border-color: var(--mystic-brand-yellow);
}

.mystic-preset--secondary:hover {
    opacity: 0.9;
}

/* Success Preset */
.mystic-preset--success {
    color: var(--mystic-success);
    background-color: var(--mystic-success-light);
    border-color: var(--mystic-success);
}

/* Warning Preset */
.mystic-preset--warning {
    color: var(--mystic-warning);
    background-color: var(--mystic-warning-light);
    border-color: var(--mystic-warning);
}

/* Error Preset */
.mystic-preset--error {
    color: var(--mystic-error);
    background-color: var(--mystic-error-light);
    border-color: var(--mystic-error);
}

/* Info Preset */
.mystic-preset--info {
    color: var(--mystic-info);
    background-color: var(--mystic-info-light);
    border-color: var(--mystic-info);
}

/* ============================================
   BUTTON COMPONENT STYLES - Using Color System
   ============================================ */

.mystic-design-button {
    font-family: var(--mystic-font-family);
    border: none;
    border-radius: 6px;
    padding: 12px 24px;
    font-weight: 600;
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Button variants using color system */
.mystic-design-button--primary {
    color: var(--mystic-brand-brown);
    background-color: var(--mystic-brand-yellow);
}

.mystic-design-button--primary:hover {
    opacity: 0.9;
}

.mystic-design-button--secondary {
    color: var(--mystic-bg-white);
    background-color: var(--mystic-brand-blue);
}

.mystic-design-button--secondary:hover {
    background-color: var(--mystic-blue-600);
}

.mystic-design-button--white-bg {
    color: var(--mystic-brand-blue);
    background-color: var(--mystic-bg-white);
    border: 1px solid var(--mystic-brand-blue);
}

.mystic-design-button--white-bg:hover {
    background-color: var(--mystic-brand-blue);
    color: var(--mystic-bg-white);
}

.mystic-design-button--white-bg:hover svg path {
    stroke: var(--mystic-bg-white);
}

.mystic-design-button--outline {
    color: var(--mystic-brand-blue);
    background-color: transparent;
    border: 1px solid var(--mystic-brand-blue);
}

.mystic-design-button--outline:hover {
    background-color: var(--mystic-brand-blue);
    color: var(--mystic-bg-white);
}



.mystic-design-button--link {
    color: var(--mystic-brand-blue);
    background-color: transparent;
    padding: 4px 0;
}

.mystic-design-button--link:hover {
    color: var(--mystic-blue-600);
    text-decoration: underline;
}