:root {
    --clr400: #2563EB; /* base */

    --clr100: #7199f2; /* light +35 */
    --clr200: #5b8af0; /* light +25 */
    --clr300: #457aee; /* light +15 */
    --clr500: #134fd3; /* dark +15 */
    --clr600: #1146ba; /* dark +25 */
    --clr700: #0e3ca1; /* dark +35 */

    /* default */
    --primary: var(--clr400);
    --primary-trans: hsl(from var(--clr400) h s l / .15);
    --secondary: #8F53E7;
    --mainBg: #F8FAFC;

    --white: #ffffff;
    --black: #212529;
    --muted: #6b7280;
    --grey: #6A6A6A;
    --soft-grey: #ededed;

    /* statis */
    --putih: #ffffff;
    --hitam: #212529;
  
    /* action */
    --red: #D63939;
    --green: #2FB344;
    --orange: #F59F00;
    --blue: #066FD1;
    --yellow: #ffeb3b;

    /* other */
    --border: #e1e1e1;
    --shadow: rgba(0, 0, 0, 0.1);
    --boxShadow: 112, 101, 240; /* rgb from default color */
    --anim: .15s ease;

    /* crumbs */
    --cr-white-custom: var(--white) !important;
    --cr-black-custom: var(--black) !important;
    --cr-grey-custom: var(--grey) !important;
    --cr-border-custom: var(--border) !important;
    --cr-disabled-text-custom: var(--muted) !important;
    --cr-static-white-custom: var(--putih) !important;
    --cr-static-black-custom: var(--hitam) !important;

    --cr-primary-custom: var(--primary) !important;
    --cr-secondary-custom: var(--secondary) !important;
    --cr-primary-hover-custom: var(--clr500) !important; /*dark +15*/
    --cr-primary-active-custom: var(--clr200) !important; /*dark +30*/
    --cr-primary-disabled-custom: var(--clr100) !important; /*light +50*/
    --cr-primary-trans-custom: var(--primary-trans) !important;

    --cr-switch-width-custom: 36px !important;
    --cr-switch-font-custom: .8rem !important;
}

body.dark {
    --white: #23272c;
    --black: #ffffff;
    --muted: #94a3b8 !important;
    --grey: #aaaaaa;
    --mainBg: #1a1e26;
    --soft-grey: #3a3e44;
    --border: #4a4a4a;
    --shadow: rgba(0, 0, 0, 0.25) !important;

    --cr-white-custom: var(--white) !important;
    --cr-black-custom: var(--black) !important;
    --cr-grey-custom: var(--grey) !important;
    --cr-border-custom: var(--border) !important;
    --cr-disabled-text-custom: var(--muted) !important;
}