// -----------------------------------------------------------------------------
// This file contains all application-wide Sass variables.
// -----------------------------------------------------------------------------

// --------------------------------------------------
// Colors
// --------------------------------------------------

$color-primary: #d0ff71;

$color-1: #0e0f11;
$color-2: #18191b;
$color-3: #00332c;
$color-4: #808080;
$color-5: #cccccc;
$color-6: #414141;
$color-7: #222222;
$color-8: #4e4e4e;
$color-9: #464749;
$color-10: #dddddd;
$color-white: #ffffff;
$color-black: #000;

// Social icon colors
$facebook: #3b5998;
$google-plus: #db4437;
$dribble: #e94c89;
$vimeo: #23b6ea;
$pinterest: #cb1f27;
$twitter: #23b6ea;
$instagram: #db4437;
$behance: #0084ff;

// --------------------------------------------------
// Container
// --------------------------------------------------

// Container width and gutter variables
$main-container: 1290px;
$container-gutters: 24px;

// Padding for containers (left and right)
$container-padding-left: calc($container-gutters / 2);
$container-padding-right: calc($container-gutters / 2);

// --------------------------------------------------
// Typography
// --------------------------------------------------

// Font families
$ff-body: "Inter", serif;
$ff-title: "BDO Grotesk", sans-serif;
$ff-dm-sans: "DM Sans", serif;
$ff-rubik: "Rubik", sans-serif;
$ff-pjs: "Plus Jakarta Sans", sans-serif;


// Font sizes (Base and Headings)
$fs-base: 16px !default;

$fs-h1: 160px;
$fs-h2: 60px;
$fs-h3: 40px;
$fs-h4: 30px;
$fs-h5: 24px;
$fs-h6: 22px;

$fs-22: 22px;
$fs-21: 21px;
$fs-20: 20px;
$fs-19: 19px;
$fs-18: 18px;
$fs-17: 17px;
$fs-16: 16px;
$fs-15: 15px;
$fs-14: 14px;
$fs-13: 13px;
$fs-12: 12px;

// --------------------------------------------------
// Transitions
// --------------------------------------------------
$transition: all 0.5s ease;

// transition 0.2 seconds
$transition-2: all 0.2s;
$transition-2-ease: all 0.2s ease;
$transition-2-ease-in: all 0.2s ease-in;
$transition-2-ease-out: all 0.2s ease-out;
$transition-2-ease-in-out: all 0.2s ease-in-out;

// transition 0.3 seconds
$transition-3: all 0.3s;
$transition-3-ease: all 0.3s ease;
$transition-3-ease-in: all 0.3s ease-in;
$transition-3-ease-out: all 0.3s ease-out;
$transition-3-ease-in-out: all 0.3s ease-in-out;

// transition 0.3 seconds
$transition-4: all 0.4s;
$transition-4-ease: all 0.4s ease;
$transition-4-ease-in: all 0.4s ease-in;
$transition-4-ease-out: all 0.4s ease-out;
$transition-4-ease-in-out: all 0.4s ease-in-out;

// transition 0.5 seconds
$transition-5: all 0.5s;
$transition-5-ease: all 0.5s ease;
$transition-5-ease-in: all 0.5s ease-in;
$transition-5-ease-out: all 0.5s ease-out;
$transition-5-ease-in-out: all 0.5s ease-in-out;
