// Font Family
$font: "Inter", sans-serif;

// ======== white colors variants
$white: #fff;
$white-90: rgba($white, 0.9);
$white-80: rgba($white, 0.8);
$white-70: rgba($white, 0.7);
$white-60: rgba($white, 0.6);
$white-50: rgba($white, 0.5);
$white-40: rgba($white, 0.4);
$white-30: rgba($white, 0.3);
$white-20: rgba($white, 0.2);
$white-10: rgba($white, 0.1);

// ========== black colors variants
$black: #000;
$black-90: rgba($black, 0.9);
$black-80: rgba($black, 0.8);
$black-70: rgba($black, 0.7);
$black-60: rgba($black, 0.6);
$black-50: rgba($black, 0.5);
$black-40: rgba($black, 0.4);
$black-30: rgba($black, 0.3);
$black-20: rgba($black, 0.2);
$black-10: rgba($black, 0.1);

// ======== dark color
$dark: #262d3f;
$dark-2: #2f3546;

// ======== gray color
$gray: #5d657b;

// ======== primary color
$primary: #2f80ed;

// ======== secondary color
$secondary: #00c1f8;

// ======== success color
$success: #219653;

// ======== danger color
$danger: #d50100;

// ======== warning color
$warning: #f7c800;

// ======== info color
$info: #97ca31;

// ======== purple color
$purple: #9b51e0;

// ======== light color
$light: #efefef;
$light-2: #e5e5e5;

// ======== active color
$active: #2f80ed;

// ======== deactive color
$deactive: #cbe1ff;

// ======== deactive color
$orange: #f2994a;

// ======== Responsive Variables
$desktop: "only screen and (min-width: 1400px)";
$laptop: "only screen and (min-width: 1200px) and (max-width: 1399px)";
$lg: "only screen and (min-width: 992px) and (max-width: 1199px)";
$md: "only screen and (min-width: 768px) and (max-width: 991px)";
$xs: "(max-width: 767px)";
$sm: "only screen and (min-width: 550px) and (max-width: 767px)";