$font-main: "Figtree",
    sans-serif;
$fontIcon: "icomoon";

:root {
    // color
    --white: #ffffff;
    --black: #000000;
    --primary: #07C42C;
    --primary-rgb: 7, 196, 44;
    --white-50: #FFFFFF80;
    --white-64: #FFFFFFA3;
    --white-32: #ffffff52;
    --white-16: #FFFFFF29;

    --black-64: #000000A3;
    --black-32: #00000052;
    --line-2: #CCCCCC;

    /* Custom */
    --shadow-1: #A3A3A340;
    --verified: #00BF43;
    --success: #3DAB25;
    --surface: #D8D8D8;
}

[data-color-primary="color-primary-1"] {
    --primary: #07C42C;
}

[data-color-primary="color-primary-2"] {
    --primary: #f8c736;
    --primary-rgb: 248, 199, 54;
}

[data-color-primary="color-primary-3"] {
    --primary: #f5772e;
    --primary-rgb: 245, 119, 46;

}

[data-color-primary="color-primary-4"] {
    --primary: #2ac6f8;
    --primary-rgb: 42, 198, 248;

}

[data-color-primary="color-primary-5"] {
    --primary: #8dca37;
    --primary-rgb: 141, 202, 55;

}

[data-color-primary="color-primary-6"] {
    --primary: #6c34fa;
    --primary-rgb: 108, 52, 250;

}

[data-color-primary="color-primary-7"] {
    --primary: #f14444;
    --primary-rgb: 241, 68, 68;

}

[data-color-primary="color-primary-8"] {
    --primary: #e14392;
    --primary-rgb: 225, 67, 146;

}