@font-face {
    font-family: "Roboto";
    src: url("../../fonts/Roboto-Regular.woff2") format("woff2"),
        url("../../fonts/Roboto-Regular.woff") format("woff"),
        url("../../fonts/Roboto-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0020-007F;
}

@font-face {
    font-family: "Roboto";
    src: url("../../fonts/Roboto-Medium.woff2") format("woff2"),
        url("../../fonts/Roboto-Medium.woff") format("woff"),
        url("../../fonts/Roboto-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0020-007F;
}

@font-face {
    font-family: "Roboto";
    src: url("../../fonts/Roboto-Bold.woff2") format("woff2"),
        url("../../fonts/Roboto-Bold.woff") format("woff"),
        url("../../fonts/Roboto-Bold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0020-007F;
}

:root {
    --color-primary: #2c7be5;
    --color-blue: #0040e3;
    --color-lightblue: #2d76fb;
    --color-success: #64CE82;

    --bg-color: #eff0f3;
    --bg-white: #fff;
    --bg-light: #f9fafd;

    --text-color: #333;
    --text-muted: #222;
    --text-white: #fff;

    --border-color: #dae2ee;
    --border-light: #eff0f3;

    --shadow-lg: 0 7px 14px rgba(65, 69, 88, 0.1);

    --font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --line-height: 1.5;

    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 10px;
    --spacing-lg: 12px;
    --spacing-xl: 16px;
    --spacing-2xl: 20px;
    --spacing-15: 15px;
    --spacing-30: 30px;
    --spacing-35: 35px;
    --spacing-40: 40px;

    --radius-sm: 4px;
    --radius-xl: 8px;
    --radius-2xl: 14px;
}