$font-main: "Poppins", sans-serif;
$font-2: "Albert Sans", sans-serif;
$font-3: "Playfair Display", serif;
$font-4: "DM Sans", sans-serif;
$font-5: "Nunito", sans-serif;
$font-6: "Be Vietnam Pro", serif;
$font-7: "Oswald", sans-serif;
$font-8: "Grandstander", cursive;
$font-9: "Jost", sans-serif;
$font-10: "Agbalumo", sans-serif;
$font-11: "Manrope", sans-serif;
$font-12: "Open Sans", sans-serif;

$fontIcon: "icomoon";
$primary: #ff6f61;


:root {
    // color
    --primary: #ff6f61;
    --primary-2: #ff9a90;
    --primary-3: #ffc5c0;
    --primary-4: #fff1ef;
    --primary-green: #39ae52;
    --secondary: #4b4ded;
    --secondary-2: rgba(75, 77, 237, 0.75);
    --secondary-3: rgba(75, 77, 237, 0.5);
    --secondary-4: #efeffd;
    --dark: #000000;
    --dark-2: #101828;
    --dark-3: #282828;
    --dark-4: #1c1c1c;
    --white: #ffffff;
    --white-2: #edeae5;
    --purple: #9148ff;
    --purple-2: #f6efff;
    --violet: #a83fff;
    --violet-2: #a474ff;
    --success: #31d0aa;
    --success-2: rgba(49, 208, 170, 0.75);
    --success-3: rgba(49, 208, 170, 0.5);
    --success-4: rgba(49, 208, 170, 0.1);
    --light-green: #00ba00;
    --text: #545454;
    --text-2: #393939;
    --text-3: #667085;
    --text-4: #757575;
    --line: #ebebeb;
    --line-2: #f2f4f7;
    --line-3: #c9c9c9;
    --line-4: #e4e7ec;
    --line-5: rgba(126, 126, 126, 0.2);
    --surface: #f5f5f5;
    --surface-2: #f7f7f7;
    --surface-3: #f3f3f3;
    --shadow-1: 0px 4px 20px 0px #0000001a;
    --gradient-1: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
    --gradient-2: linear-gradient(180deg, rgba(231, 236, 210, 0) 0%, #e7ecd2 100%);
    --backdrop: rgba(0, 0, 0, 0.4);
    --bg-scrollbar-track: #f1f1f1;
    --bg-scrollbar-thumb: #c1c1c1;
    // rgba color
    --rgba-white: rgba(255, 255, 255, 0.8);
    --rgba-dark: rgba(0, 0, 0, 0.6);
    --rgba-dark-2: rgba(0, 0, 0, 0.8);
    --rgba-dark-3: rgba(0, 0, 0, 0.2);
    --yellow: #ffc108;
    --yellow-2: #ff9a00;
    --brown: #8f5252;
    --red: #e21b1b;
}

.primary-2 {
    --primary: #39ae52;
}
.primary-3 {
    --primary: #d62c2c;
}