/**
 * 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);

    /* ============================================
       GRAY SCALE
       ============================================ */
    --mystic-gray-50:  #F7F7F8;
    --mystic-gray-100: #EEEEF0;
    --mystic-gray-200: #D9D9DE;
    --mystic-gray-300: #B9B9C0;
    --mystic-gray-400: #92929E;
    --mystic-gray-500: #757682;
    --mystic-gray-600: #5E5E6B;
    --mystic-gray-700: #484851;
    --mystic-gray-800: #42424A;
    --mystic-gray-900: #3A3A40;
    --mystic-gray-950: #27272A;

    /* ============================================
       YELLOW SCALE
       ============================================ */
    /* Adjust hexes to match your design tokens */
    --mystic-yellow-50:  #FEFBEC;  /* Yellow / 50  */
    --mystic-yellow-100: #FDF2C8;  /* Yellow / 100 */
    --mystic-yellow-200: #FAE48D;  /* Yellow / 200 */
    --mystic-yellow-300: #F7CD46;  /* Yellow / 300 (lighter than main) */
    --mystic-yellow-400: #F5BC2A;  /* Yellow / 400 */
    --mystic-yellow-500: #EF9B11;  /* Yellow / 500 (Main brand yellow) */
    --mystic-yellow-600: #D4760B;  /* Yellow / 600 */
    --mystic-yellow-700: #B0540D;  /* Yellow / 700 */
    --mystic-yellow-800: #8F4111;  /* Yellow / 800 */
    --mystic-yellow-900: #753612;  /* Yellow / 900 */
    --mystic-yellow-950: #431B05;  /* Yellow / 950 */

    /* ============================================
       BLUE SCALE
       ============================================ */
    --mystic-blue-50:  #E8F0FE;  /* Blue / 50  */
    --mystic-blue-100: #E2F2FC;  /* Blue / 100 */
    --mystic-blue-200: #BEE4F9;  /* Blue / 200 */
    --mystic-blue-300: #85CFF4;  /* Blue / 300 */
    --mystic-blue-400: #45B6EB;  /* Blue / 400 */
    --mystic-blue-500: #1D9DDA;  /* Blue / 500 */
    --mystic-blue-600: #0F7EBA;  /* Blue / 600 */
    --mystic-blue-700: #0E6496;  /* Blue / 700 */
    --mystic-blue-800: #0F557D;  /* Blue / 800 */ 
    --mystic-blue-900: #13496A;  /* Blue / 900 (Main brand blue) */
    --mystic-blue-950: #0C2D45;  /* Blue / 950 */

    /* ============================================
       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);
}

/* ============================================
   GLOBAL ROOT VARIABLES (migrated from widgets.css)
   ============================================ */

:root {
  /* Brand Colors */
  --brand-yellow: var(--e-global-color-7ae1c95, #fed000);
  --brand-blue: var(--e-global-color-819a535, #13496a);
  --brand-brown: var(--e-global-color-fb5cce0, #431b05);
  --brand-yellow-alt: var(--e-global-color-alt, #fefbec);

  /* UI Colors */
  --blue-600: var(--e-global-color-51343bb, #0f7eba);
  --blue-900-main: #13496a;
  --yellow-300-main: #f7cd46;
  --Black-50: rgba(20, 20, 20, 0.05);
  --neutral-300: var(--e-global-color-2abcfaa, #b9b9c0);

  /* Additional Button Colors */
  --yellow-400: #f5bc2a;
  --yellow-950: #431b05;
  --blue-950: #0c2d45;
  --blue-800: #0f557d;
  --blue-100: #e2f2fc;
  --white-1000: #fff;

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

  /* Typography */
  --font-public-sans: var(--e-global-typography-2d573f7-font-family, "Public Sans"), -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* Common Spacing */
  --border-radius-sm: 8px;
  --border-radius-md: 16px;
  --border-radius-lg: 120px;
  --border-radius-full: 100px;

  /* Transitions */
  --transition-fast: all 0.2s ease-in-out;
  --transition-smooth: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-accordion: all 0.5s ease-in-out;

  /* Blues */
  --blue-50: #f1f9fe;
  --blue-200: #bee4f9;
  --blue-300: #85cff4;
  --blue-400: #4586eb;
  --blue-500: #1d90da;
  --blue-700: #0e6496;
  --blue-900: var(--blue-900-main);
  --lightblue: var(--blue-600);

  /* Yellows */
  --yellow-50: #fefbec;
  --yellow-100: #fdf2c8;
  --yellow-200: #fae48d;
  --yellow-300: #f7cd46;
  --yellow-400: #f5bc2a;
  --yellow-500: #ef9811;
  --yellow-600: #d4760b;
  --yellow-700: #b0540d;
  --yellow-800: #8f4111;
  --yellow-900: #753612;
  --yellow-950: #431b05;

  /* Blacks */
  --black-50: #1414141a;
  --black-100: #1414142b;
  --black-200: #14141442;
  --black-300: #1414146b;
  --black-400: #1414147d;
  --black-500: #14141494;
  --black-600: #141414a6;
  --black-700: #141414b2;
  --black-800: #141414bf;
  --black-900: #141414cc;
  --black-950: #141414e3;
  --black-999: #14141499;
  --black-1000: #141414;

  /* Whites */
  --white-50: #ffffff12;
  --white-100: #ffffff17;
  --white-200: #ffffff24;
  --white-300: #ffffff54;
  --white-400: #ffffff63;
  --white-500: #ffffff78;
  --white-600: #ffffffb9;
  --white-700: #ffffffc9;
  --white-800: #ffffffe0;
  --white-900: #fffffff1;
  --white-1000: #ffffff;

  /* Greens */
  --green-01: #12556c;
  --green-02: #d3ffe4;

  /* Reds */
  --red-01: #d02323;
  --red-02: #f9e6e6;

  /* Pinks */
  --pink-01: #d02dd0;
  --pink-02: #fce9fa;

  /* Purples */
  --purple-01: #5c2dd0;
  --purple-02: #dfcfff;

  /* iOS Blues */
  --ios-blue-01: #007aff;
  --ios-blue-02: #dbedff;

  /* Illustration Accents */
  --illustration-accent-01-shape: #f7cd46;
  --illustration-accent-01-graphic: #ffeca5;
  --illustration-accent-01-background: #fdf2c8;
  --illustration-accent-02-shape: #374fda;
  --illustration-accent-02-graphic: #87c5f9;
  --illustration-accent-02-background: #96cdfb;
  --illustration-accent-02-text: #243dc7;
  --illustration-accent-01-text: #b0540d;
}

/* Fallback for when Elementor global variables are not available (no kit) */
body:not([class*="elementor-kit-"]) {
  /* Brand Colors */
  --brand-yellow: #fed000;
  --brand-blue: #13496a;
  --brand-brown: #431b05;
  --brand-yellow-alt: #fefbec;

  /* UI Colors */
  --blue-600: #0f7eba;
  --blue-900-main: var(--blue-900);
  --yellow-300-main: #f7cd46;
  --Black-50: rgba(20, 20, 20, 0.05);

  /* Section Badge Colors */
  --postal-bg: #dfcfff;
  --postal-text: #5c2dd0;
  --federal-bg: #ffcfff;
  --federal-text: #d02dd0;
  --hbr-bg: #cfe7ff;
  --hbr-text: #007aff;
  --healthcare-bg: #ffcfcf;
  --healthcare-text: #d02323;
  --section-bg: #12b56c;
  --section-text: #d3ffe4;

  /* Typography */
  --font-public-sans: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* ============================================
   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;
}