:root {
    /* === COULEURS SYSTÈME (FIXES - JAMAIS MODIFIÉES) === */
    --system-primary-h: 213;
    --system-primary-s: 71%;
    --system-primary-l: 58%;
    --sytem-primary:hsl(var(--system-primary-h), var(--system-primary-s), var(--system-primary-l));

    --system-success-h: 142;
    --system-success-s: 71%;
    --system-success-l: 45%;
    --system-success: hsl(var(--system-success-h), var(--system-success-s), var(--system-success-l));

    --system-danger-h: 0;
    --system-danger-s: 84%;
    --system-danger-l: 60%;
    --system-danger: hsl(var(--system-danger-h), var(--system-danger-s), var(--system-danger-l));

    --system-warning-h: 45;
    --system-warning-s: 100%;
    --system-warning-l: 51%;
    --system-warning: hsl(var(--system-warning-h), var(--system-warning-s), var(--system-warning-l));

    --system-info-h: 199;
    --system-info-s: 89%;
    --system-info-l: 48%;
    --system-info: hsl(var(--system-info-h), var(--system-info-s), var(--system-info-l));

    /* === COULEURS CORPORATE PAR DÉFAUT === */
    /* Basé sur votre --color-primary: #92c02e */
    --corporate-primary-h: 80;
    --corporate-primary-s: 61%;
    --corporate-primary-l: 47%;



    /* Couleur secondaire par défaut */
    --corporate-secondary-h: 38;
    --corporate-secondary-s: 92%;
    --corporate-secondary-l: 55%;

    /* Couleur accent par défaut */
    --corporate-accent-h: 142;
    --corporate-accent-s: 71%;
    --corporate-accent-l: 45%;

    /* === PALETTES CALCULÉES AUTOMATIQUEMENT === */
    --system-primary-color: hsl(var(--system-primary-h), var(--system-primary-s), var(--system-primary-l));
    --system-primary-light: hsl(var(--system-primary-h), var(--system-primary-s), calc(var(--system-primary-l) + 10%));
    --system-primary-dark: hsl(var(--system-primary-h), var(--system-primary-s), calc(var(--system-primary-l) - 8%));
    --system-primary-hover: hsl(var(--system-primary-h), var(--system-primary-s), calc(var(--system-primary-l) - 10%));


    --corporate-primary: hsl(var(--corporate-primary-h), var(--corporate-primary-s), var(--corporate-primary-l));
    --corporate-primary-light: hsl(var(--corporate-primary-h), var(--corporate-primary-s), calc(var(--corporate-primary-l) + 10%));
    --corporate-primary-dark: hsl(var(--corporate-primary-h), var(--corporate-primary-s), calc(var(--corporate-primary-l) - 8%));
    --corporate-primary-hover: hsl(var(--corporate-primary-h), var(--corporate-primary-s), calc(var(--corporate-primary-l) - 10%));

    --corporate-secondary: hsl(var(--corporate-secondary-h), var(--corporate-secondary-s), var(--corporate-secondary-l));
    --corporate-secondary-light: hsl(var(--corporate-secondary-h), var(--corporate-secondary-s), calc(var(--corporate-secondary-l) + 20%));
    --corporate-secondary-hover: hsl(var(--corporate-secondary-h), var(--corporate-secondary-s), calc(var(--corporate-secondary-l) - 8%));

    --corporate-accent: hsl(var(--corporate-accent-h), var(--corporate-accent-s), var(--corporate-accent-l));
    --corporate-accent-light: hsl(var(--corporate-accent-h), var(--corporate-accent-s), calc(var(--corporate-accent-l) + 20%));
    --corporate-accent-hover: hsl(var(--corporate-accent-h), var(--corporate-accent-s), calc(var(--corporate-accent-l) - 8%));




    /* === COULEURS NEUTRES === */
    --white: #ffffff;
    --black: #000000;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-550: #64748b; /*breadcrump*/
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    --action-default:var(--gray-600);
    --action-default-hover:var(--gray-800);



    /* === VOTRE PALETTE COMPLÈTE (GARDÉE) === */
    --xo-academy-primary: #F58221;
    --xo-academy-accent: var(--xo-academy-primary);
    --xo-academy-secondary: #130c2a;
    --xo-academy-gray: #f4f4f4;
    --xo-academy-tertiary: #ffe8d9;
    --xo-academy-alternative1: #fff2e9;
    --xo-academy-alternative2: #fffefe;


    /* === VOTRE PALETTE AlERTE et MESSAGE ERREUR === */
    /* Autres couleurs */
    --positive-color: #5cb85c;
    --negative-color: #d9534f;
    --required-color: #ef4444;

    /* alert box */
    --error-color: #e53e3e;
    --error-background-color : #fee2e2;
    --error-border:#fecaca;
    --success-color: #059669;
    --sucess-background-color: #dcfce7;
    --sucess-border:#bbf7d0;
    --warning-color: #eab308;
    --warning-background-color: #fef3c7;
    --warning-border: #fde68a;
    --info-color: #17a2b8;
    --info-background-color:#d1f4f9;
    --info-border:#a8e5ef;


    /* === RED === */
    --red-50: #fef2f2;
    --red-100: #fee2e2;
    --red-200: #fecaca;
    --red-300: #fca5a5;
    --red-400: #f87171;
    --red-500: #ef4444;
    --red-600: #dc2626;
    --red-700: #b91c1c;
    --red-800: #991b1b;
    --red-900: #7f1d1d;

    /* === ORANGE === */
    --orange-50: #fff7ed;
    --orange-100: #ffedd5;
    --orange-200: #fed7aa;
    --orange-300: #fdba74;
    --orange-400: #fb923c;
    --orange-500: #f97316;
    --orange-600: #ea580c;
    --orange-700: #c2410c;
    --orange-800: #9a3412;
    --orange-900: #7c2d12;

    /* === AMBER === */
    --amber-50: #fffbeb;
    --amber-100: #fef3c7;
    --amber-200: #fde68a;
    --amber-300: #fcd34d;
    --amber-400: #fbbf24;
    --amber-500: #f59e0b;
    --amber-600: #d97706;
    --amber-700: #b45309;
    --amber-800: #92400e;
    --amber-900: #78350f;

    /* === YELLOW === */
    --yellow-50: #fefce8;
    --yellow-100: #fef9c3;
    --yellow-200: #fef08a;
    --yellow-300: #fde047;
    --yellow-400: #facc15;
    --yellow-500: #eab308;
    --yellow-600: #ca8a04;
    --yellow-700: #a16207;
    --yellow-800: #854d0e;
    --yellow-900: #713f12;

    /* === LIME === */
    --lime-50: #f7fee7;
    --lime-100: #ecfccb;
    --lime-200: #d9f99d;
    --lime-300: #bef264;
    --lime-400: #a3e635;
    --lime-500: #84cc16;
    --lime-600: #65a30d;
    --lime-700: #4d7c0f;
    --lime-800: #3f6212;
    --lime-900: #365314;

    /* === GREEN === */
    --green-50: #f0fdf4;
    --green-100: #dcfce7;
    --green-200: #bbf7d0;
    --green-300: #86efac;
    --green-400: #4ade80;
    --green-500: #22c55e;
    --green-600: #16a34a;
    --green-700: #15803d;
    --green-800: #166534;
    --green-900: #14532d;

    /* === EMERALD === */
    --emerald-50: #ecfdf5;
    --emerald-100: #d1fae5;
    --emerald-200: #a7f3d0;
    --emerald-300: #6ee7b7;
    --emerald-400: #34d399;
    --emerald-500: #10b981;
    --emerald-600: #059669;
    --emerald-700: #047857;
    --emerald-800: #065f46;
    --emerald-900: #064e3b;

    /* === TEAL === */
    --teal-50: #f0fdfa;
    --teal-100: #ccfbf1;
    --teal-200: #99f6e4;
    --teal-300: #5eead4;
    --teal-400: #2dd4bf;
    --teal-500: #14b8a6;
    --teal-600: #0d9488;
    --teal-700: #0f766e;
    --teal-800: #115e59;
    --teal-900: #134e4a;

    /* === CYAN === */
    --cyan-50: #ecfeff;
    --cyan-100: #cffafe;
    --cyan-200: #a5f3fc;
    --cyan-300: #67e8f9;
    --cyan-400: #22d3ee;
    --cyan-500: #06b6d4;
    --cyan-600: #0891b2;
    --cyan-700: #0e7490;
    --cyan-800: #155e75;
    --cyan-900: #164e63;

    /* === SKY === */
    --sky-50: #f0f9ff;
    --sky-100: #e0f2fe;
    --sky-200: #bae6fd;
    --sky-300: #7dd3fc;
    --sky-400: #38bdf8;
    --sky-500: #0ea5e9;
    --sky-600: #0284c7;
    --sky-700: #0369a1;
    --sky-800: #075985;
    --sky-900: #0c4a6e;

    /* === BLUE === */
    --blue-50: #eff6ff;
    --blue-100: #dbeafe;
    --blue-200: #bfdbfe;
    --blue-300: #93c5fd;
    --blue-400: #60a5fa;
    --blue-500: #3b82f6;
    --blue-600: #2563eb;
    --blue-700: #1d4ed8;
    --blue-800: #1e40af;
    --blue-900: #1e3a8a;

    /* === INDIGO === */
    --indigo-50: #eef2ff;
    --indigo-100: #e0e7ff;
    --indigo-200: #c7d2fe;
    --indigo-300: #a5b4fc;
    --indigo-400: #818cf8;
    --indigo-500: #6366f1;
    --indigo-600: #4f46e5;
    --indigo-700: #4338ca;
    --indigo-800: #3730a3;
    --indigo-900: #312e81;

    /* === VIOLET === */
    --violet-50: #f5f3ff;
    --violet-100: #ede9fe;
    --violet-200: #ddd6fe;
    --violet-300: #c4b5fd;
    --violet-400: #a78bfa;
    --violet-500: #8b5cf6;
    --violet-600: #7c3aed;
    --violet-700: #6d28d9;
    --violet-800: #5b21b6;
    --violet-900: #4c1d95;

    /* === PURPLE === */
    --purple-50: #faf5ff;
    --purple-100: #f3e8ff;
    --purple-200: #e9d5ff;
    --purple-300: #d8b4fe;
    --purple-400: #c084fc;
    --purple-500: #a855f7;
    --purple-600: #9333ea;
    --purple-700: #7e22ce;
    --purple-800: #6b21a8;
    --purple-900: #581c87;

    /* === FUCHSIA === */
    --fuchsia-50: #fdf4ff;
    --fuchsia-100: #fae8ff;
    --fuchsia-200: #f5d0fe;
    --fuchsia-300: #f0abfc;
    --fuchsia-400: #e879f9;
    --fuchsia-500: #d946ef;
    --fuchsia-600: #c026d3;
    --fuchsia-700: #a21caf;
    --fuchsia-800: #86198f;
    --fuchsia-900: #701a75;

    /* === PINK === */
    --pink-50: #fdf2f8;
    --pink-100: #fce7f3;
    --pink-200: #fbcfe8;
    --pink-300: #f9a8d4;
    --pink-400: #f472b6;
    --pink-500: #ec4899;
    --pink-600: #db2777;
    --pink-700: #be185d;
    --pink-800: #9d174d;
    --pink-900: #831843;

    /* === ROSE === */
    --rose-50: #fff1f2;
    --rose-100: #ffe4e6;
    --rose-200: #fecdd3;
    --rose-300: #fda4af;
    --rose-400: #fb7185;
    --rose-500: #f43f5e;
    --rose-600: #e11d48;
    --rose-700: #be123c;
    --rose-800: #9f1239;
    --rose-900: #881337;

    /* === VARIABLES SÉMANTIQUES === */
    --color-brand: var(--corporate-primary);
    --color-brand-hover: var(--corporate-primary-hover);
    --color-brand-light: var(--corporate-primary-light);
    --color-brand-dark: var(--corporate-primary-dark);

    --corporate-brand: var(--color-brand);
    --corporate-brand-hover: var(--corporate-primary-hover);
    --corporate-brand-light:var(--corporate-primary-light);
    --corporate-brand-dark:var(--corporate-primary-dark);

    --color-accent: var(--corporate-secondary);
    --color-accent-hover: var(--corporate-secondary-hover);

    --color-alert-success: var(--system-success);
    --color-alert-danger: var(--system-danger);
    --color-alert-warning: var(--system-warning);
    --color-alert-info: var(--system-info);

    --color-text-primary: var(--gray-900);
    --color-text-secondary: var(--gray-600);
    --color-text-muted: var(--gray-400);
    --color-text-white: var(--white);

    --color-background: var(--white);
    --color-background-alt: var(--gray-50);
    --color-background-elevated: var(--white);

    --color-border: var(--gray-200);
    --color-border-strong: var(--gray-300);

    /* === MODULES MÉTIER === */
    --color-module-account: var(--corporate-primary);
    --color-module-campaigns: var(--corporate-secondary);
    --color-module-orders: var(--corporate-accent);
    --color-module-contacts: var(--red-500);
    --color-module-products: var(--amber-500);
    --color-module-photos: var(--gray-100);
    --color-module-calendar: var(--corporate-accent);

    /* === COMPATIBILITÉ AVEC VOTRE CODE EXISTANT === */
    /* Mapping des anciennes variables vers nouvelles */
    --color-primary: var(--system-primary-color);
    --primary-color: var(--system-primary-color);
    --primary-dark: var(--system-primary-dark);
    --color-danger: var(--system-danger);
    --color-text: var(--color-text-primary);
    --color-dark: var(--gray-800);
    --color-gray: var(--gray-300);
    --color-light-gray: var(--gray-400);

    /* Blocs - mapping vers modules */
    --bloc-account-bkg-color: var(--color-module-account);
    --bloc-campaigns-bkg-color: var(--color-module-campaigns);
    --bloc-orders-bkg-color: var(--color-module-orders);
    --bloc-contacts-bkg-color: var(--color-module-contacts);
    --bloc-products-bkg-color: var(--color-module-products);
    --bloc-photos-bkg-color: var(--color-module-photos);
    --bloc-calendar-bkg-color: var(--color-module-calendar);

    /* Badges - compatibilité */
    --action-badges-default-backgound-color: var(--gray-500);
    --action-badges-primary-backgound-color: var(--color-brand);
    --action-badges-success-backgound-color: var(--system-success);
    --action-badges-danger-backgound-color: var(--system-danger);
    --action-badges-warning-backgound-color: var(--system-warning);
    --action-badges-info-backgound-color: var(--system-info);

    /* Links - compatibilité */
    --action-link-primary-color: var(--color-brand);
    --action-link-primary-dark-color: var(--color-brand-dark);

    /* DataTable - compatibilité */
    --action-datatable-td-danger-color: var(--system-danger);
    --action-datatable-td-info-color: var(--system-info);
    --action-datatable-td-success-color: var(--system-success);
    --action-datatable-td-warning-color: var(--system-warning);

    /* Spécifique XO-Retail - gardé */
    --xo-connect-as-customer-text-color: #b94a48;
    --xo-connect-as-customer-bkg-color: #f2d0d0;
    --xo-leftmenu-bkg-color: #000000;

    /* Modales - mapping vers système */
    --modal-alert-error-bkg-color: var(--system-danger);
    --modal-alert-error-title-color: var(--white);
    --modal-alert-warning-bkg-color: var(--system-warning);
    --modal-alert-warning-title-color: var(--white);
    --modal-alert-success-bkg-color: var(--system-success);
    --modal-alert-sucess-title-color: var(--white);
    --modal-alert-info-bkg-color: var(--system-info);
    --modal-alert-info-title-color: var(--white);
    --modal-alert-message-color: var(--black);
    --modal-alert-close-color: var(--white);

    /* card background and border-color */
    --border-color: var(--gray-200); /* was #e2e8f0 */
}


#modalAlert .modal-header {
    background-color: var(--blue-500,#0069B3);
    color: var(--white)
}

#connect-as-customer {
    color: var(--xo-connect-as-customer-text-color);
    background-color: var(--xo-connect-as-customer-bkg-color);
    border-bottom: 1px dotted var(--xo-connect-as-customer-text-color);
}

/*======================================
   Couleurs des tags de type de fichier
 ======================================*/


.tag-label-indd {
    --tag-label-color: #AA61AE;
    --tag-label-border-color:  #AA61AE80;
    --tag-label-background-color: transparent;
}

.tag-label-jpg {
    --tag-label-color: #14A085;
    --tag-label-border-color:  #14A08580;
    --tag-label-background-color: transparent;
}

.tag-label-mp3 {
    --tag-label-color: #7E6599;
    --tag-label-border-color:  #7E659980;
    --tag-label-background-color: transparent;
}

.tag-label-mp4 {
    --tag-label-color: #FF5364;
    --tag-label-border-color:  #FF536480;
    --tag-label-background-color: transparent;
}

.tag-label-pdf {
    --tag-label-color: #CB4C4C;
    --tag-label-border-color:  #CB4C4C80;
    --tag-label-background-color: transparent;
}

.tag-label-png {
    --tag-label-color: #659C35;
    --tag-label-border-color:  #659C3580;
    --tag-label-background-color: transparent;
}

.tag-label-ppt {
    --tag-label-color: #F6712E;
    --tag-label-border-color:  #F6712E80;
    --tag-label-background-color: transparent;
}

.tag-label-psd {
    --tag-label-color: #5889C4;
    --tag-label-border-color:  #5889C480;
    --tag-label-background-color: transparent;
}

.tag-label-rar {
    --tag-label-color: #F5A623;
    --tag-label-border-color:  #F5A62380;
    --tag-label-background-color: transparent;
}

.tag-label-zip {
    --tag-label-color: #556080;
    --tag-label-border-color:  #55608080;
    --tag-label-background-color: transparent;
}