$font-stack: "Hind", sans-serif !important;

/** Colors **/
$color-white: #ffffff;
$color-black: #000000;
$color-white-transparent: rgba(255, 255, 255, 0.75);
$color-offwhite: #f6f7fb;

$color-gray: #8888b5;
$color-gray-light: #b7b7cb;
$color-gray-xlight: #bfbfd8;
$color-gray-xxlight: #dee0ef;
$color-gray-xxxlight: #e7eafb;
$color-gray-4xlight: #D0D1E2;
$color-gray-opaque: rgba(136, 136, 181, 0.35);

$color-lilac: #6171ff;

$color-red: #f2617b;
$color-red-light: #f6e8ee;

$color-dark-blue: #212162;
$color-light-blue: #E8EAFB;

$color-turquoise: #00d9ce;

$color-yellow: #fab950;

/* Note: Theme Colors have been added. Existing colors will not
    be remove because doing so may have an impact on the colors
    of other components. When all components are using the
    same theme colors, we will stick to a single set of colors.
*/

/** Colors **/
$color-neutral-500: $color-gray;
$color-neutral-300: $color-gray-xxlight;
$color-neutral-50: $color-offwhite;
$color-neutral-900: $color-dark-blue;

$color-primary-500: $color-lilac;
$color-primary-100: #bbcaf3;
$color-primary-50: #e8edfb;

$color-secondary-500: $color-turquoise;

$color-success-500: #10B981;

$color-warning-500: $color-yellow;
$color-warning-50: #FFFBEB;

$color-error-500: $color-red;
$color-error-50: #F6E9EE;



// NOTE: Please use these variables as much as possible
// it will be easier to update in case we want to change
// our main/primary colors and background
$color-primary: $color-lilac;

$color-background: $color-offwhite;

$color-text: $color-dark-blue;
$color-text-light: $color-gray;

$color-error: $color-red;
$color-error-light: $color-red-light;

$color-highlight: $color-turquoise;

/** Size/Spacing **/
$font-size-display1: 70px;
$font-size-display2: 30px;
$font-size-display3: 25px;
$font-size-display4: 20px;
$font-size-display5: 18px;
$font-size-display6: 16px;
$font-size-default: 15px;
$font-size-button: 12px;
$font-size-overline: 12px;

$font-weight-bold: 700;
$font-weight-header: 600;
$font-weight-subheader: 500;
$font-weight-light: 300;
$font-weight-button: 600;

$letter-spacing-condensed: -0.03em;
$letter-spacing-expanded: 0.05em;

$spacing-xxs: 4px;
$spacing-xs: 10px;
$spacing-s: 20px;
$spacing-m: 30px;
$spacing-l: 40px;
$spacing-xl: 50px;
$spacing-xxl: 60px;
$spacing-xxxl: 80px;

$line-height-default: 200%; // 2x font-size
$line-height-m: 150%; // 1.5x font-size
$max-width-desktop: 1000px;

$spacing-mobile-default: 30px;
$spacing-desktop-default: 60px;
