// Table of Contents
// ==================================================
// Animation
// Color
// Common
// Font
// Grid
// Progress

// Animation
// ==================================================
$animation-delays: (
  xxl: 2s,
  xl: 1.75s,
  l: 1.5s,
  m: 1.25s,
  b: 1s,
  s: 0.75s,
  xs: 0.5s,
  xxs: 0.25s,
  n: 0
);
$animation-durations: (
  xxl: 2s,
  xl: 1.75s,
  l: 1.5s,
  m: 1.25s,
  b: 1s,
  s: 0.75s,
  xs: 0.5s,
  xxs: 0.25s
);

// Color
// ==================================================
$colors-brand: (
  'lime': rgba(169,195,67,1),
  'green': rgba(50,194,117,1),
  'teal': rgba(73,194,193,1),
  'blue': rgba(31,140,235,1),
  'indigo': rgba(126,97,234,1),
  'purple': rgba(161,108,202,1),
  'pink': rgba(225,96,120,1),
  'red': rgba(224,78,80,1),
  'orange': rgba(226,147,58,1),
  'yellow': rgba(233,194,31,1)
);
$colors-grayscale: (
  'transparent': rgba(0,0,0,0),
  'dark-black': rgba(30,40,52,1),
  'black': rgba(39,52,68,1),
  'light-black': rgba(48,64,84,1),
  'dark-gray': rgba(109,126,150,1),
  'gray': rgba(132,146,166,1),
  'light-gray': rgba(155,166,182,1),
  'dark-haze': rgba(227,232,240,1),
  'haze': rgba(238,240,246,1),
  'light-haze': rgba(249,250,252,1),
  'white': rgba(255,255,255,1)
);
$colors-global: (
  'primary': map-get($colors-brand, 'blue'),
  'secondary': map-get($colors-brand, 'green'),
  'tertiary': map-get($colors-brand, 'red'),
  'quaditiary': map-get($colors-brand, 'yellow')
);
$colors: map-merge(map-merge($colors-brand, $colors-grayscale), $colors-global);
$colors-black-text: 'transparent', 'dark-haze', 'haze', 'light-haze', 'white';

// Common
// ==================================================
$common-border-radiuses: (
  xl: 999px,
  l: 10px,
  m: 6px,
  b: 3px,
  s: 2px,
  n: 0
);
$common-margins-and-paddings: (
  xxxl: 100px,
  xxl: 80px,
  xl: 60px,
  l: 40px,
  m: 30px,
  b: 20px,
  s: 10px,
  xs: 5px,
  n: 0
);
$common-display-types: block, inline, inline-block, table, table-cell, table-row;
$common-visibility-types: collapse, hidden, visible;

// Font
// ==================================================
$font-families: (
  monospace: (Courier, Consolas, Menlo, Monaco, monospace),
  sans-serif: ('Fakt Soft Pro', Verdana, Tahoma, sans-serif),
  serif: (Georgia, 'Times New Roman', serif)
);
$font-indents: (
  xxxl: 25px,
  xxl: 20px,
  xl: 15px,
  l: 10px,
  m: 5px,
  b: 0,
  s: -5px,
  xs: -10px,
  xxs: -15px,
  xxxs: -20px
);
$font-line-heights: (
  xxxl: 80px,
  xxl: 62px,
  xl: 42px,
  l: 32px,
  m: 28px,
  b: 26px,
  s: 22px,
  xs: 18px,
  xxs: 14px,
  xxxs: 12px,
  i: 1,
  n: 0
);
$font-sizes: (
  xxxl: 56px,
  xxl: 42px,
  xl: 28px,
  l: 20px,
  m: 18px,
  b: 16px,
  s: 14px,
  xs: 12px,
  xxs: 10px,
  xxxs: 8px
);
$font-spaces: (
  xxl: 10px,
  xl: 6px,
  l: 2px,
  m: 1px,
  b: 0,
  s: -1px,
  xs: -2px
);
$font-weights: (
  bold: 700,
  semibold: 500,
  normal: 400,
  semilight: 300
);

// Grid
// ==================================================
$grid-column-widths: (
  one: 10%,
  two: 20%,
  three: 30%,
  four: 40%,
  five: 50%,
  six: 60%,
  seven: 70%,
  eight: 80%,
  nine: 90%,
  ten: 100%,
  one-fourth: 25%,
  one-third: 33.33333%,
  one-half: 50%,
  two-thirds: 66.66666%,
  three-fourths: 75%
);
$grid-container-widths: (
  l: (calc(100% - 260px), 1360px),
  m: (calc(100% - 140px), 1180px),
  b: (calc(100% - 60px), 960px),
  s: (calc(100% - 20px), 760px),
  null: (100%, null)
);
$grid-row-margins: (
  xxxl: 100px,
  xxl: 80px,
  xl: 60px,
  l: 40px,
  m: 30px,
  b: 20px,
  s: 10px,
  xs: 5px,
  null: 0
);
$grid-container-types: container, container-fixed;
$grid-row-types: row, row-responsive;

// Progress
// ==================================================
$progress-sizes: (
  l: 40px,
  m: 32px,
  b: 24px,
  s: 16px,
  xs: 8px
);