// Colors
$color-primary: #3C0576;
$color-secondary: #FF6C89;
$color-secondary-bright: #FF0536;
$color-text: #333;
$color-tertiary: #FFE0C5;
$color-lightpurple: #8B50B2;
$color-gray: #666;
$color-lightgray: #999;

// CSS Variables
:root {
    // Colors
    --color-primary: #{$color-primary};
    --color-secondary: #{$color-secondary};
    --color-text: #{$color-text};
    --color-tertiary: #{$color-tertiary};
    --color-lightpurple: #{$color-lightpurple};
    --color-gray: #{$color-gray};
    --color-lightgray: #{$color-lightgray};
}


/* Fonts
========================================================================== */
$base-font-size: 28px;

// Families
$replacement-sans: "Helvetica, Arial, sans-serif";
$replacement-serif: "Georgia, serif";
$font-sans: "G-Regular", #{$replacement-sans};
$font-sans-sb: "G-Semibold", #{$replacement-sans};
$font-sans-light: "G-Light", #{$replacement-sans};
$font-serif: "M-Light", #{$replacement-serif};
$font-serif-extra: "M-Extralight", #{$replacement-serif};



/* Sizes, margins and spacing
====================================================================== */
$base-width: 1600;

// Blocks


/* Directories
========================================================================== */
$dir-img: "/img";
$dir-fonts: "/fonts";


/* Animation
========================================================================== */
// Easing
$ease-cubic: cubic-bezier(.785, .135, .15, .86);
$ease-quart: cubic-bezier(.165, .84, .44, 1);
$ease-inout: ease-in-out;


/* Responsive breakpoints
========================================================================== */
$screen-mob: 450px;
$screen-xs: 767px;
$screen-sm: 768px;
$screen-md: 992px;
$screen-lg: 1200px;
$screen-xl: 1440px;
$screen-xxl: 1600px;
