_variables.scss

/* stylelint-disable number-leading-zero */

/*
===========================================
Paths
===========================================
*/
$base-path: '../../';

$breakpoints: (
  'phone': 320px,
  'phone-lg': 480px,
  'nav': 720px,
  'tablet': 768px,
  'desktop': 1024px,
  'desktop-lg': 1300px,
  'desktop-xl': 1500px,
);

/*
===========================================
Colors
===========================================
*/

$color-base: rgba(0, 0, 0, 0.84);
$color-base-muted: rgba(0, 0, 0, 0.55);

$color-olive-dark: #3a4431;
$color-olive-light: #aab6ad;
$color-vino-light: #a58992;
$color-white: #ffffff;
$color-haze: #e1e1df;
$color-link: #2a93ce;
$color-link-hover: #0975b1;
$color-accent: #9a2ace;
$color-link-visited: #9a2ace;

/*
===========================================
Layout Stuffs
===========================================
*/
$grid-columns: 12 !default;

/*
===========================================
Fonts
===========================================
*/
$font-sans: 'Raleway', sans-serif;
$font-serif: 'kazimir', sans-serif;

$font-weight-normal: 400;
$font-weight-medium: 500;
$font-weight-bold: 700;
$font-weight-black: 900;

/*
===========================================
Font sizes
Two font sizes given for responsive type settings
in _fluidtype.scss mixin.
===========================================
*/
$fluid_min: 320px;
$fluid_max: 1366px;

//Min font sizes
$base_sm: 16px;
$h1_sm: 48.83px;
$h2_sm: 39.06px;
$h3_sm: 31.25px;
$h4_sm: 25px;
$h5_sm: 20px;
$h6_sm: 16px;
$small_sm: 12.8px;

//Max font sizes
$base_lg: 20px;
$h1_lg: 61.04px;
$h2_lg: 48.83px;
$h3_lg: 39.06px;
$h4_lg: 31.25px;
$h5_lg: 25px;
$h6_lg: 20px;
$small_lg: 16px;

$font-sizes: (
  base: 'base',
  h1: 'h1',
  h2: 'h2',
  h3: 'h3',
  h4: 'h4',
  h5: 'h5',
  h6: 'h6',
  small: 'small',
);

/*
===========================================
Base unit
===========================================
This grid is based on the 8pt grid which helps us
ensure consistent horizontal and vertical rhythm.
We are using pixels rather than relative units to ensure
consistent spacing in the event that the root font size
is not equal 10.
More info: https://spec.fm/specifics/8-pt-grid
*/

// Base unit
$base-unit: 8;

// Map for spacing tokens in Rems
$units: (
  0: 0,
  1px: calc(1 / 10),
  0.25: calc(calc($base-unit * 0.25) / 10),
  0.5: calc(calc($base-unit * 0.5) / 10),
  1: calc(calc($base-unit * 1) / 10),
  1.5: calc(calc($base-unit * 1.5) / 10),
  2: calc(calc($base-unit * 2) / 10),
  2.5: calc(calc($base-unit * 2.5) / 10),
  3: calc(calc($base-unit * 3) / 10),
  4: calc(calc($base-unit * 4) / 10),
  5: calc(calc($base-unit * 5) / 10),
  6: calc(calc($base-unit * 6) / 10),
  7: calc(calc($base-unit * 7) / 10),
  8: calc(calc($base-unit * 8) / 10),
  9: calc(calc($base-unit * 9) / 10),
  10: calc(calc($base-unit * 10) / 10),
  15: calc(calc($base-unit * 15) / 10),
  -1px: - (
      calc(1 / 10),
    ),
  -0.25: - (
      calc(calc($base-unit * 0.25) / 10),
    ),
  -0.5: - (
      calc(calc($base-unit * 0.5) / 10),
    ),
  -1: - (
      calc(calc($base-unit * 1) / 10),
    ),
  -1.5: - (
      calc(calc($base-unit * 1.5) / 10),
    ),
  -2: - (
      calc(calc($base-unit * 2) / 10),
    ),
  -2.5: - (
      calc(calc($base-unit * 2.5) / 10),
    ),
  -3: - (
      calc(calc($base-unit * 3) / 10),
    ),
  -4: - (
      calc(calc($base-unit * 4) / 10),
    ),
  -5: - (
      calc(calc($base-unit * 5) / 10),
    ),
  -6: - (
      calc(calc($base-unit * 6) / 10),
    ),
  -7: - (
      calc(calc($base-unit * 7) / 10),
    ),
  -8: - (
      calc(calc($base-unit * 8) / 10),
    ),
  -9: - (
      calc(calc($base-unit * 9) / 10),
    ),
  -10: - (
      calc(calc($base-unit * 10) / 10),
    ),
  -15: - (
      calc(calc($base-unit * 15) / 10),
    ),
);

/*
===========================================
Z-indexes
===========================================
*/
$z-index-flyout: 1000;