/* ==========================================================
   COLOR PALETTE
   No utilizar estas variables directamente en los componentes.
   Siempre utilizar las variables de theme.css
   ========================================================== */

:root {

    /*=========================================================
    =                       BLUE                             =
    =========================================================*/

    --blue-50:  #F5FAFD;
    --blue-100: #E5F2FA;
    --blue-200: #B6D5EA;
    --blue-300: #86B3D1;
    --blue-400: #5B8FB1;
    --blue-500: #3A7195;
    --blue-600: #325483;
    --blue-700: #244166;
    --blue-800: #1D3F6C;


    /*=========================================================
    =                       CYAN                             =
    =========================================================*/

    --cyan-50:  #F2FBFC;
    --cyan-100: #CAEAED;
    --cyan-200: #99CED3;
    --cyan-300: #68AAB0;
    --cyan-400: #40888F;


    /*=========================================================
    =                       PINK                             =
    =========================================================*/

    --pink-50:  #FBF1F2;
    --pink-100: #F5D7DC;
    --pink-200: #EDB5BF;
    --pink-300: #CA7F8C;
    --pink-400: #A84E5E;


    /*=========================================================
    =                       GOLD                             =
    =========================================================*/

    --gold-50:  #FFFCF4;
    --gold-100: #FFF3D9;
    --gold-200: #FFE8B8;
    --gold-300: #FFDD95;
    --gold-400: #EAC067;


    /*=========================================================
    =                      ORANGE                            =
    =========================================================*/

    --orange-50:  #FFF9F4;
    --orange-100: #FFEBD9;
    --orange-200: #FFD9B8;
    --orange-300: #FFC795;
    --orange-400: #EAA567;


    /*=========================================================
    =                       GRAYS                            =
    =========================================================*/

    --gray-0:   #FFFFFF;
    --gray-50:  #FAFBFC;
    --gray-100: #F2F4F6;
    --gray-200: #E5E8EB;
    --gray-300: #D0D5DA;
    --gray-400: #A4ABB2;
    --gray-500: #5F6366;
    --gray-600: #44484B;
    --gray-700: #2F3234;
    --gray-800: #1F2123;
    --gray-900: #111214;


    /*=========================================================
    =                  FEEDBACK COLORS                       =
    =========================================================*/

    --success-100:#EAF8EE;
    --success-500:#5FAF72;

    --warning-100:#FFF6E5;
    --warning-500:#EAA567;

    --error-100:#FCEAEA;
    --error-500:#D76A6A;

}