_variables.scss

// Fonts
$font-family-sans-serif: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
$font-family-monospace:  Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
$font-weight-normal: normal !default;
$font-weight-bold: bold !default;

$font-family-base:      $font-family-sans-serif !default;
$font-size-base:        1em !default; // Assumes the browser default, typically `16px`
$font-weight-base:      $font-weight-normal !default;
$dt-font-weight:        $font-weight-bold !default;

$line-height-base:      1.3 !default;

$logo-max-height:       120px !default;

// Start with assigning color names to specific hex values.

$white:  #fff !default;
$black:  #000 !default;
$red:    #d9534f !default;
$orange: #f0ad4e !default;
$green:  #5cb85c !default;
$dark-brown:   #23201c !default;
$dark-brown-inverse: #dcdfe3 !default;
$light-brown: #f6f0e7!default;
$light-orange:   #fdb68e !default;

$teal:   #5bc0de !default;

// Create grayscale

$gray-dark:                 #292b2c !default;
$gray:                      #464a4c !default;
$gray-light:                #636c72 !default;
$gray-lighter:              #eceeef !default;
$gray-lightest:             #f7f7f9 !default;

// Reassign color vars to semantic color scheme

$brand-primary:             $dark-brown !default;
$brand-secondary:           $light-orange !default;
$brand-background:          $light-brown !default;
$brand-success:             $green !default;
$brand-info:                $teal !default;
$brand-warning:             $orange !default;
$brand-danger:              $red !default;
$brand-inverse:             $dark-brown-inverse !default;

// Links

$link-color:            $brand-primary !default;
$link-decoration:       none !default;
$link-hover-color:      darken($link-color, 15%) !default;
$link-hover-decoration: underline !default;

// Hover
$enable-hover-media-query:  false !default;

// General
$table-cell-padding:    .75rem !default;
$text-muted:            $gray-light !default;
$cursor-disabled:       not-allowed !default;
$body-color:          black !default;
$body-bg:             white !default; // 2


// Utils for breakpoints
@mixin _assert-ascending($map, $map-name) {
  $prev-key: null;
  $prev-num: null;
  @each $key, $num in $map {
    @if $prev-num == null {
      // Do nothing
    } @else if not comparable($prev-num, $num) {
      @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
    } @else if $prev-num >= $num {
      @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
    }
    $prev-key: $key;
    $prev-num: $num;
  }
}

@mixin _assert-starts-at-zero($map) {
  $values: map-values($map);
  $first-value: nth($values, 1);
  @if $first-value != 0 {
    @warn "First breakpoint in `$mq-breakpoints` must start at 0, but starts at #{$first-value}.";
  }
}

$mq-breakpoints: (
  'xs': 0,
  'sm': 576px,
  'md': 768px,
  'lg': 992px,
  'xl': 1200px,
  'xxl': 1680px
) !default;
@include _assert-ascending($mq-breakpoints, "$mq-breakpoints");
@include _assert-starts-at-zero($mq-breakpoints);


// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.
$container-max-width:100% !default;

$container-max-widths: (
  'sm': 540px,
  'md': 720px,
  'lg': 960px,
  'xl': 1140px,
  'xxl': 1560px
) !default;
@include _assert-ascending($container-max-widths, "$container-max-widths");


// Grid columns
//
// Set the number of columns and specify the width of the gutters.

$grid-columns:               12 !default;     // this sets the "make-col(number)"
                                              // default amount of columns
$grid-gutter-width-base:     32px !default;
$grid-gutter-widths: (
  'xs': $grid-gutter-width-base,
  'sm': $grid-gutter-width-base,
  'md': $grid-gutter-width-base,
  'lg': $grid-gutter-width-base,
  'xl': $grid-gutter-width-base,
  'xxl': $grid-gutter-width-base
) !default;


// this is a variable used to name the auto generated columns
$im-columns-class: '.col' !default;

// this is a list of grids to create in the CSS
// It creates helper classes for all the grids listed
// considering our mq-breakpoints (for grid and gutters)
$grids: (1, 5, 7, 8, 12) !default;
// Usage is similar to twitter bootstrap:
// <div class="col col--1-12 col--6-12@md col--1-1@sm">col-1-12 cia</div>
// It generates something like:
// .col--1-1 {
//   width: 100%;
// }
// .col--1-5 {
//   width: 20%;
// }
// .col--2-5 {
//   width: 40%;
// }
// .col--3-5 {
//   width: 60%;
// }
// .col--4-5 {
//   width: 80%;
// }
// .col--5-5 {
//   width: 100%;
// }
// .col--1-7 {
//   width: 14.28571%;
// }
// .col--2-7 {
//   width: 28.57143%;
//
// ...et cetera...


//debug breakpoints (override it with $mq-show-breakpoints: ();)
$mq-show-breakpoints: (xs, sm, md, lg, xl, xxl) !default;

$spacing-sizes: (
  0: 0rem,
  1: 0.5rem,
  2: 1rem,
  3: 1.5rem,
  4: 2rem,
  5: 2.5rem,
  6: 3rem,
  7: 3.5rem,
  8: 4rem,
  9: 4.5rem,
  10: 5rem,
  11: 5.5rem,
  12: 6rem,
  13: 7rem,
  14: 7.5rem,
  15: 8rem,
  16: 8.5rem,
  17: 9rem,
  18: 9.5rem,
  19: 10rem,
  20: 10.5rem,
  21: 11rem,
  22: 11.5rem,
  23: 12rem,
  24: 12.5rem,
  25: 13rem,
  26: 13.5rem,
  27: 14rem,
  28: 14.5rem,
  29: 15rem,
  30: 15.5rem,
  31: 16rem,
  32: 16.5rem,
  33: 17rem,
  34: 17.5rem,
  35: 18rem,
  36: 18.5rem
) !default;

$spacing-important: false !default;


// z-indexes
$z-super-top: 1000 !default;
$z-top: 999 !default;
$z-front: 998 !default;
$z-page: 997 !default;
$z-bottom: 996 !default;
$z-super-bottom: 996 !default;


$line-height-big:       $line-height-base + .5 !default;
$line-height-huge:      $line-height-base + 1.5 !default;
$line-height-h1:        $line-height-base - .2 !default;

$golden: 1.618 !default;
$modularscale: (
  base: $font-size-base,
  ratio: 1.5,
  20em: (
    ratio: 1.1
  ),
  36em: (
    ratio: 1.15
  ),
  48em: (
    ratio: 1.17
  ),
  62em: (
    ratio: 1.18
  ),
  75: (
    ratio: 1.2
  ),
  105em: (
    ratio: 1.23
  )
)!default;

//do not scale fluidly
$ms-fluid: false !default;