// 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(221,234,76,1),
  green: rgba(109,202,150,1),
  teal: rgba(86,210,238,1),
  blue: rgba(31,140,235,1),
  indigo: rgba(126,97,234,1),
  purple: rgba(154,111,199,1),
  pink: rgba(255,127,127,1),
  red: rgba(224,78,80,1),
  orange: rgba(255,144,78,1),
  yellow: rgba(242,195,48,1)
);
$colors-grayscale: (
  transparent: rgba(0,0,0,0),
  dark-black: rgba(44,50,62,1),
  black: rgba(52,59,74,1),
  light-black: rgba(60,68,86,1),
  dark-gray: rgba(143,157,178,1),
  gray: rgba(155,167,186,1),
  light-gray: rgba(167,177,194,1),
  dark-haze: rgba(227,232,240,1),
  haze: rgba(239,242,248,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,
  null: 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: 64px,
  xxl: 50px,
  xl: 36px,
  l: 26px,
  m: 24px,
  b: 22px,
  s: 18px,
  xs: 16px,
  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% - 60px), 1360px),
  m: (calc(100% - 40px), 1180px),
  b: (calc(100% - 20px), 960px),
  s: (calc(100% - 10px), 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
);