:root {
    /* PRIMARY PALETTE */
    --color-primary: #3E4786;
    --color-primary-10: #F4F4FA;
    --color-primary-50: #EDEEF8;
    --color-primary-100: #DADDF1;
    --color-primary-200: #B5BBE3;
    --color-primary-300: #9099D5;
    --color-primary-400: #6B77C7;
    --color-primary-500: #5765BF;
    --color-primary-600: #3F4A96;
    --color-primary-700: #1C224A;



    --color-secondary: #121212;
    --color-secondary-10: #F8F9FA;
    --color-secondary-50: #F1F3F5;
    --color-secondary-100: #E9ECEF;
    --color-secondary-200: #CED4DA;
    --color-secondary-300: #ADB5BD;
    --color-secondary-400: #6C757D;
    --color-secondary-500: #495057;
    --color-secondary-600: #343A40;
    --color-secondary-700: #212529;


    --color-violet-10: #F5F1F9;
    --color-violet-50: #F1EDF7;
    --color-violet-100: #E2DCEF;
    --color-violet-200: #C5B8E0;
    --color-violet-300: #A995D0;
    --color-violet-400: #8C72C0;
    --color-violet-500: #4E377C;
    --color-violet-600: #432F6A;
    --color-violet-700: #2C1F47;


    --color-indigo-50: #EDEEF8;
    --color-indigo-100: #DADDF1;
    --color-indigo-200: #B5BBE3;
    --color-indigo-300: #9099D5;
    --color-indigo-400: #6B77C7;
    --color-indigo-500: #5765BF;
    --color-indigo-600: #3F4A96;
    --color-indigo-700: #1C224A;

    --color-green-10: #F4FBFA;
    --color-green-50: #E8F9FD;
    --color-green-100: #D0F3FB;
    --color-green-200: #A2E7F6;
    --color-green-300: #73DAF2;
    --color-green-400: #45CEED;
    --color-green-500: #129BBA;
    --color-green-600: #0D7187;
    --color-green-700: #094E5D;



    --color-dark-green-10: #F4FBFA;
    --color-dark-green-50: #E8F9FD;
    --color-dark-green-100: #D0F3FB;
    --color-dark-green-200: #A2E7F6;
    --color-dark-green-300: #73DAF2;
    --color-dark-green-400: #45CEED;
    --color-dark-green-500: #129BBA;
    --color-dark-green-600: #0D7187;
    --color-dark-green-700: #094E5D;


    --color-blue-600: #0077CC;
;





    /*RGBA */
    --color-primary-rgba: rgba(94, 103, 191, 0.8);

    --color-secondary: #A1A8E5;
    --color-accent: #FF6B6B;

    /* NEUTRALS */
    --color-white: #ffffff;
    --color-light: #f8f9fa;
    --color-gray: #dee2e6;
    --color-dark: #343a40;
    --color-black: #000000;

    /* BACKGROUND COLORS */
    --bg-light: var(--color-light);
    --bg-white: var(--color-white);
    --bg-primary: var(--color-primary);
    --bg-gradient: linear-gradient(135deg, #5765BF 0%, #A1A8E5 100%);

    /* TEXT COLORS */
    --text-dark: #212529;
    --text-muted: #6c757d;
    --text-white: #ffffff;
    --text-primary: var(--color-primary);
    --text-secondary: var(--color-secondary);

    /* SHADOWS */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.color-primary {
    color: var(--color-primary);
}
.color-primary-100 {
    color: var(--color-primary-100);
}

.color-primary-300 {
    color: var(--color-primary-300);
}
.color-primary-400 {
    color: var(--color-primary-400);
}
.color-primary-500 {
    color: var(--color-primary-500);
}



.color-violet-50{
    color: var(--color-violet-50);
}
.color-violet-100{
    color: var(--color-violet-100);
}
.color-violet-200{
    color: var(--color-violet-200);
}
.color-violet-300{
    color: var(--color-violet-300);
}
.color-violet-400{
    color: var(--color-violet-400);
}

.color-violet-500{
    color: var(--color-violet-500);
}
.color-violet-600{
    color: var(--color-violet-600);
}
.color-violet-700{
    color: var(--color-violet-700);
}




.color-indigo-50{
    color: var(--color-indigo-50);
}
.color-indigo-100{
    color: var(--color-indigo-100);
}
.color-indigo-200{
    color: var(--color-indigo-200);
}
.color-indigo-300{
    color: var(--color-indigo-300);
}
.color-indigo-400{
    color: var(--color-indigo-400);
}
.color-indigo-500{
    color: var(--color-indigo-500);
}
.color-indigo-600{
    color: var(--color-indigo-600);
}
.color-indigo-700{
    color: var(--color-indigo-700);
}


.color-green-50{
    color: var(--color-green-50);
}
.color-green-100{
    color: var(--color-green-100);
}
.color-green-200{
    color: var(--color-green-200);
}
.color-green-300{
    color: var(--color-green-300);
}
.color-green-400{
    color: var(--color-green-400);
}
.color-green-500{
    color: var(--color-green-500);
}
.color-green-600{
    color: var(--color-green-600) ;
}
.color-green-700{
    color: var(--color-green-700);
}