:root {
    /* Color styles */
    --w-f--base-900: #1A202C;
    --w-f--base-800: #2D3648;
    --w-f--base-700: #4A5468;
    --w-f--base-600: #717D96;
    --w-f--base-500: #A0ABC0;
    --w-f--base-400: #CBD2E0;
    --w-f--base-300: #E2E7F0;
    --w-f--base-200: #EDF0F7;
    --w-f--base-100: #F7F9FC;
    --w-f--base-white: #FFFFFF;

    --gloria-purple-50: #F3E6FF;
    --gloria-purple-100: #E0C0FF;
    --gloria-purple-200: #BF87F7;
    --gloria-purple-300: #A564E5;
    --gloria-purple-400: #7D3AC1;
    --gloria-purple-500: #5A169E;
    --gloria-purple-600: #460D80;
    --gloria-purple-700: #3B086E;
    --gloria-purple-800: #350957;
    --gloria-purple-900: #200336;

    --gloria-red-50: #FFF1F2;
    --gloria-red-100: #FFD6D8;
    --gloria-red-200: #FFBFC4;
    --gloria-red-300: #FFA3A9;
    --gloria-red-400: #FF6772;
    --gloria-red-500: #FE1C2C;
    --gloria-red-600: #DC000F;
    --gloria-red-700: #CA000E;
    --gloria-red-800: #91000A;
    --gloria-red-900: #640007;

    --gloria-teal-25: #EBF2F3;
    --gloria-teal-50: #EDFCFF;
    --gloria-teal-100: #C9F6FF;
    --gloria-teal-200: #9DEAF8;
    --gloria-teal-300: #7DD5E6;
    --gloria-teal-400: #59BDD0;
    --gloria-teal-500: #38AAC0;
    --gloria-teal-600: #2491A6;
    --gloria-teal-700: #198094;
    --gloria-teal-800: #0A6273;
    --gloria-teal-900: #033E49;

    --gloria-yellow-50: #FFFCED;
    --gloria-yellow-100: #FBF2C5;
    --gloria-yellow-200: #FBEEAE;
    --gloria-yellow-300: #F8E58A;
    --gloria-yellow-400: #FEDC73;
    --gloria-yellow-500: #F9CF4F;
    --gloria-yellow-600: #E8B721;
    --gloria-yellow-700: #D9AB1C;
    --gloria-yellow-800: #BD8E00;
    --gloria-yellow-900: #886600;

    --gloria-active-link: var(--w-f--base-white);

    --p-primary-color: var(--gloria-teal-700);
    --p-button-primary-background: var(--gloria-teal-700);
    --p-button-primary-border-color: var(--gloria-teal-700);
    --p-button-primary-hover-background: var(--gloria-teal-800);
    --p-button-primary-hover-border-color: var(--gloria-teal-800);
    --p-primary-hover-color: var(--gloria-teal-800);
    --p-highlight-color: var(--gloria-teal-600);
    --p-highlight-focus-color: var(--gloria-teal-600);

    /* Availability Grid Colors */
    --gloria-availability-listing-name-hover: #FEDC73;
    --gloria-availability-listing-name-selected: #C9F6FF;

    --gloria-availability-avail: #fff;
    --gloria-availability-avail-hover: #EDFCFF;
    --gloria-availability-avail-selected: #C9F6FF;
    
}