:root {
    /*  warna */
    --white: #ffffff;

    --primaryShade900: #03070F;
    --primaryShade800: #081026;
    --primaryShade700: #10214C;
    --primaryShade600: #173171;
    --primary: #1F4197;
    --primaryShade400: #4C67AC;
    --primaryShade300: #798DC1;
    --primaryShade200: #A5B3D5;
    --primaryShade100: #D2D9EA;
    --primaryShade50: #E9EDF5;

    --secondaryShade800: #331E00;
    --secondaryShade700: #543100;
    --secondaryShade600: #B66A00;
    --secondary: #FFCB82;
    --secondaryShade400: #FFD9A3;
    --secondaryShade300: #FFE4BF;
    --secondaryShade200: #FFEED6;
    --secondaryShade100: #FFF5E8;

    --greyShade900: #0D0D0D;
    --greyShade800: #202020;
    --greyShade700: #404040;
    --greyShade600: #606060;
    --grey: #808080;
    --greyShade400: #999999;
    --greyShade300: #B3B3B3;
    --greyShade200: #CCCCCC;
    --greyShade100: #E6E6E6;
    --greyShade50: #F3F3F3;

    --dangerShade900: #120304;
    --dangerShade800: #2C0809;
    --dangerShade700: #581012;
    --dangerShade600: #84171B;
    --danger: #B01F24;
    --dangerShade400: #C04C50;
    --dangerShade300: #D0797C;
    --dangerShade200: #DFA5A7;
    --dangerShade100: #EFD2D3;
    --dangerShade50: #F8E9EA;

    --successShade800: #003325;
    --successShade700: #003D2C;
    --successShade600: #005A42;
    --success: #008A65;
    --successShade400: #00E1A5;
    --successShade300: #2EFFC7;
    --successShade200: #6EFFD8;
    --successShade100: #A2FFE6;
}
/*
    INI ADALAH BACKGROUND
*/

.bg-white {
    background-color: var(--white);
}

.bg-primary-shade-900 {
    background-color: var(--primaryShade900);
}

.bg-primary-shade-800 {
    background-color: var(--primaryShade800);
}

.bg-primary-shade-700 {
    background-color: var(--primaryShade700);
}


.bg-primary-shade-600 {
    background-color: var(--primaryShade600);
}

.bg-primary {
    background-color: var(--primary);
}

.bg-primary-shade-400 {
    background-color: var(--primaryShade400);
}

.bg-primary-shade-300 {
    background-color: var(--primaryShade300);
}

.bg-primary-shade-200 {
    background-color: var(--primaryShade200);
}

.bg-primary-shade-100 {
    background-color: var(--primaryShade100);
}

.bg-primary-shade-50 {
    background-color: var(--primaryShade50);
}


.bg-secondary-shade-800 {
    background-color: var(--secondaryShade800);
}

.bg-secondary-shade-700 {
    background-color: var(--secondaryShade700);
}


.bg-secondary-shade-600 {
    background-color: var(--secondaryShade600);
}

.bg-secondary {
    background-color: var(--secondary);
}

.bg-secondary-shade-400 {
    background-color: var(--secondaryShade400);
}

.bg-secondary-shade-300 {
    background-color: var(--secondaryShade300);
}

.bg-secondary-shade-200 {
    background-color: var(--secondaryShade200);
}

.bg-secondary-shade-100 {
    background-color: var(--secondaryShade100);
}


.bg-danger-shade-900 {
    background-color: var(--dangerShade900);
}

.bg-danger-shade-800 {
    background-color: var(--dangerShade800);
}

.bg-danger-shade-700 {
    background-color: var(--dangerShade700);
}


.bg-danger-shade-600 {
    background-color: var(--dangerShade600);
}

.bg-danger {
    background-color: var(--danger);
}

.bg-danger-shade-400 {
    background-color: var(--dangerShade400);
}

.bg-danger-shade-300 {
    background-color: var(--dangerShade300);
}

.bg-danger-shade-200 {
    background-color: var(--dangerShade200);
}

.bg-danger-shade-100 {
    background-color: var(--dangerShade100);
}

.bg-danger-shade-50 {
    background-color: var(--dangerShade50);
}


.bg-success-shade-800 {
    background-color: var(--successShade800);
}

.bg-success-shade-700 {
    background-color: var(--successShade700);
}


.bg-success-shade-600 {
    background-color: var(--successShade600);
}

.bg-success {
    background-color: var(--success);
}

.bg-success-shade-400 {
    background-color: var(--successShade400);
}

.bg-success-shade-300 {
    background-color: var(--successShade300);
}

.bg-success-shade-200 {
    background-color: var(--successShade200);
}

.bg-success-shade-100 {
    background-color: var(--successShade100);
}


.bg-grey-shade-900 {
    background-color: var(--greyShade900);
}

.bg-grey-shade-800 {
    background-color: var(--greyShade800);
}

.bg-grey-shade-700 {
    background-color: var(--greyShade700);
}


.bg-grey-shade-600 {
    background-color: var(--greyShade600);
}

.bg-grey {
    background-color: var(--grey);
}

.bg-grey-shade-400 {
    background-color: var(--greyShade400);
}

.bg-grey-shade-300 {
    background-color: var(--greyShade300);
}

.bg-grey-shade-200 {
    background-color: var(--greyShade200);
}

.bg-grey-shade-100 {
    background-color: var(--greyShade100);
}

.bg-grey-shade-50 {
    background-color: var(--greyShade50);
}


/*
    INI ADALAH BACKGROUND
*/
.text-primary-shade-900 {
    color: var(--primaryShade900);
}

.text-primary-shade-800 {
    color: var(--primaryShade800);
}

.text-primary-shade-700 {
    color: var(--primaryShade700);
}


.text-primary-shade-600 {
    color: var(--primaryShade600);
}

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

.text-primary-shade-400 {
    color: var(--primaryShade400);
}

.text-primary-shade-300 {
    color: var(--primaryShade300);
}

.text-primary-shade-200 {
    color: var(--primaryShade200);
}

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

.text-primary-shade-50 {
    color: var(--primaryShade50);
}


.text-secondary-shade-800 {
    color: var(--secondaryShade800);
}

.text-secondary-shade-700 {
    color: var(--secondaryShade700);
}


.text-secondary-shade-600 {
    color: var(--secondaryShade600);
}

.text-secondary {
    color: var(--secondary);
}

.text-secondary-shade-400 {
    color: var(--secondaryShade400);
}

.text-secondary-shade-300 {
    color: var(--secondaryShade300);
}

.text-secondary-shade-200 {
    color: var(--secondaryShade200);
}

.text-secondary-shade-100 {
    color: var(--secondaryShade100);
}


.text-danger-shade-900 {
    color: var(--dangerShade900);
}

.text-danger-shade-800 {
    color: var(--dangerShade800);
}

.text-danger-shade-700 {
    color: var(--dangerShade700);
}


.text-danger-shade-600 {
    color: var(--dangerShade600);
}

.text-danger {
    color: var(--danger);
}

.text-danger-shade-400 {
    color: var(--dangerShade400);
}

.text-danger-shade-300 {
    color: var(--dangerShade300);
}

.text-danger-shade-200 {
    color: var(--dangerShade200);
}

.text-danger-shade-100 {
    color: var(--dangerShade100);
}

.text-danger-shade-50 {
    color: var(--dangerShade50);
}


.text-success-shade-800 {
    color: var(--successShade800);
}

.text-success-shade-700 {
    color: var(--successShade700);
}


.text-success-shade-600 {
    color: var(--successShade600);
}

.text-success {
    color: var(--success);
}

.text-success-shade-400 {
    color: var(--successShade400);
}

.text-success-shade-300 {
    color: var(--successShade300);
}

.text-success-shade-200 {
    color: var(--successShade200);
}

.text-success-shade-100 {
    color: var(--successShade100);
}


.text-grey-shade-900 {
    color: var(--greyShade900);
}

.text-grey-shade-800 {
    color: var(--greyShade800);
}

.text-grey-shade-700 {
    color: var(--greyShade700);
}


.text-grey-shade-600 {
    color: var(--greyShade600);
}

.text-grey {
    color: var(--grey);
}

.text-grey-shade-400 {
    color: var(--greyShade400);
}

.text-grey-shade-300 {
    color: var(--greyShade300);
}

.text-grey-shade-200 {
    color: var(--greyShade200);
}

.text-grey-shade-100 {
    color: var(--greyShade100);
}

.text-grey-shade-50 {
    color: var(--greyShade50);
}