:root {
    /* FOREGROUNDS */
    --layout-foreground: #000000;
    --layout: #FFFFFF;

    --foreground: #252525;
    --background: #FFFFFF;
    
    --foreground-primary: #0A77FF;
    --foreground-disabled: #DFE2E8;
    --foreground-tertiary: #68727D;

    /* MAINS*/
    --border: #EAECF0;
    --disabled: #F5F6F8;
    --icon:  #68727D;
    --icon-disabled: #DFE2E8;
    
    /* PRIMARY */
    --primary-50:  #F0F7FF;
    --primary-100: #ECF4FC;
    --primary-200: #C3E0FF;
    --primary-300: #99CCFF;
    --primary-400: #4DA3FF;
    --primary-500: #0A77FF;
    --primary-600: #0863CC;
    --primary-700: #064999;
    --primary-800: #043366;
    --primary-900: #021A33;

    --primary: var(--primary-500);
    --border-primary: #90C2FF;
    --primary-focus: #B2D5FF;
    --primary-stroke: #0E69E2;

    /* SUCCESS */
    --success-50:  #F3FCF7;
    --success-100: #E9F8F1;
    --success-200: #C2EED9;
    --success-300: #A9E3C7;
    --success-400: #65CD9A;
    --success-500: #27B973;
    --success-600: #1F9C61;
    --success-700: #187D4E;
    --success-800: #105E3A;
    --success-900: #093E27;

    --success: var(--success-500);
    --border-success: #A9E3C7;
    --success-focus: #28A74540;

    /* WARNING */
    --warning-50:  #FFF9F0;
    --warning-100: #FDF6EA;
    --warning-200: #F9E2BA;
    --warning-300: #F9DAAC;
    --warning-400: #F5C56F;
    --warning-500: #EFA22F;
    --warning-600: #D88F28;
    --warning-700: #B3741F;
    --warning-800: #865617;
    --warning-900: #59390E;

    --warning: var(--warning-500);
    --border-warning: #F9DAAC;

    /* DANGER */
    --danger-50:  #FFF5F5;
    --danger-100: #FFEFEE;
    --danger-200: #FFD9D7;
    --danger-300: #FEA19B;
    --danger-400: #FF7066;
    --danger-500: #E33B32;
    --danger-600: #CC4B42;
    --danger-700: #A13A33;
    --danger-800: #732723;
    --danger-900: #3D1211;

    --danger: var(--danger-500);
    --border-danger: #DB3A33;
    --danger-focus: #FDDDDC;
    --danger-stroke: #DB3A33;

    /* GRAY */
    --gray-50:  #FAFAFC;
    --gray-100: #EAECF0;
    --gray-200: #D4D7DC;
    --gray-300: #BFC4CA;
    --gray-400: #8A9198;
    --gray-500: #68727D;
    --gray-600: #50575F;
    --gray-700: #3B3F44;
    --gray-800: #252525;
    --gray-900: #0F0F0F;

    --gray: var(--gray-500);
}

:root[data-theme='dark'], body.dark-mode {
    /* FOREGROUNDS */
    --layout-foreground: #FFFFFF;
    --layout: #252525;

    --foreground: #F7F7F9;
    --background: #323539;
    
    --foreground-primary: #2C8AFF;
    --foreground-disabled: #68727D;
    --foreground-tertiary: #979AA0;

    /* MAINS */
    --border: #323539;
    --disabled: #252525;
    
    /* PRIMARY */
    --primary-50:  #0A1C33;
    --primary-100: #0F3059;
    --primary-200: #144580;
    --primary-300: #1859A6;
    --primary-400: #1D6ECC;
    --primary-500: #2C8AFF;
    --primary-600: #57A1FF;
    --primary-700: #8BC1FF;
    --primary-800: #B5DAFF;
    --primary-900: #E1F1FF;

    --primary: var(--primary-500);
    --border-primary: #1859A6;
    --primary-stroke: #1D6ECC;
    --primary-focus: #292B2C;

    /* GRAY */
    --gray-50: #2E3033;
    --gray-100: #2B2D2F;
    --gray-200: #3B3F44;
    --gray-300: #50575F;
    --gray-400: #68727D;
    --gray-500: #8A9198;
    --gray-600: #B0B6BD;
    --gray-700: #DFE2E8;
    --gray-800: #EAECF0;
    --gray-900: #FAFAFC;

    --gray: var(--gray-400);

    /* SUCCESS */
    --success-50:  #0D1F14;
    --success-100: #123820;
    --success-200: #16512B;
    --success-300: #1B6A36;
    --success-400: #209241;
    --success-500: #27B973;
    --success-600: #52C98E;
    --success-700: #85D9AE;
    --success-800: #B5E9CB;
    --success-900: #E0F9EA;

    --success: var(--success-500);
    --border-success: #1B6A36;
    --success-focus: #123820;

    /* WARNING */
    --warning-50:  #2D1F0A;
    --warning-100: #4A3211;
    --warning-200: #684518;
    --warning-300: #87581F;
    --warning-400: #A56B26;
    --warning-500: #EFA22F;
    --warning-600: #F4B957;
    --warning-700: #F8CF7F;
    --warning-800: #FCE6A7;
    --warning-900: #FFF9D1;

    --warning: var(--warning-500);
    --border-warning: #684518;
    --warning-focus: #4A3211;

    /* DANGER */
    --danger-50:  #2A0E0D;
    --danger-100: #4A1715;
    --danger-200: #6A1F1B;
    --danger-300: #8A2722;
    --danger-400: #AB3028;
    --danger-500: #E33B32;
    --danger-600: #EA645E;
    --danger-700: #F18E89;
    --danger-800: #F7B8B5;
    --danger-900: #FDE2E0;

    --danger: var(--danger-500);
    --border-danger: #8A2722;
    --danger-focus: #4A1715;
    --danger-stroke: #AB3028;
}