// Variables
// -----------------------------------------------
// -----------------------------------------------

// -----------------------------------------------
// Typography
// -----------------------------------------------
@import url("https://fonts.googleapis.com/css?family=Fira+Code:400,500,700&display=swap");
@import url("https://fonts.googleapis.com/css?family=Muli:400,600,700&display=swap");

// Colors
// -----------------------------------------------
$brand-primary: #4bbacd;
$brand-secondary: #1d263f;
$gray-primary: #1d263f;
$white: #fff;
$link-color: darken($brand-primary, 10%);
$link-hover: darken($brand-primary, 15%);
$sidebar-active-color: lighten($brand-secondary, 2%);
$sidebar-head-active-color: lighten($brand-secondary, 4%);

// Typography
// -----------------------------------------------
$base-font-family: "Muli", sans-serif;
$header-font-family: "Muli", sans-serif;
$header-font-family: $base-font-family;
$code-font-family: "Fira Code", monospace;
//-
$base-font-color: $gray-primary;
$header-font-color: $base-font-color;
//-
$font-regular: 400;
$font-semibold: 600;
$font-bold: 700;
//-
$base-font-size: 15px;
$base-line-height: 1.6;

// Sizes
// -----------------------------------------------
$base-point-grid: 8px;
// Animation
// -----------------------------------------------
$base-duration: 250ms;
$base-timing: ease;

// Breakpoint
// -----------------------------------------------
$bp-small: 480px;
$bp-medium: 768px;
$bp-large: 992px;
$bp-xlarge: 1140px;

// Grid
// -----------------------------------------------
$column-1: (1/12 * 100%);
$column-2: (2/12 * 100%);
$column-3: (3/12 * 100%);
$column-4: (4/12 * 100%);
$column-5: (5/12 * 100%);
$column-6: (6/12 * 100%);
$column-7: (7/12 * 100%);
$column-8: (8/12 * 100%);
$column-9: (9/12 * 100%);
$column-10: (10/12 * 100%);
$column-11: (11/12 * 100%);
$column-12: (12/12 * 100%);
$gutter-margin: ($base-point-grid * 4);

// Border
// -----------------------------------------------
$border-color: rgba($gray-primary, 0.1);
