// 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-global: (
  'primary': 'blue',
  'secondary': 'green',
  'tertiary': 'red',
  'quaditiary': 'yellow'
);
$colors-brand: (
  'lime': rgba(151,212,91,1),
  'green': rgba(52,208,89,1),
  'teal': rgba(66,223,180,1),
  'sky': rgba(0,179,255,1),
  'blue': rgba(50,139,255,1),
  'indigo': rgba(141,99,239,1),
  'purple': rgba(179,104,219,1),
  'pink': rgba(237,106,123,1),
  'red': rgba(240,74,65,1),
  'brown': rgba(198,115,89,1),
  'orange': rgba(252,163,45,1),
  'yellow': rgba(247,208,47,1)
);
$colors-brand-global: (
  'primary': map-global-collect($colors-brand, 'primary'),
  'secondary': map-global-collect($colors-brand, 'secondary'),
  'tertiary': map-global-collect($colors-brand, 'tertiary'),
  'quaditiary': map-global-collect($colors-brand, 'quaditiary')
);
$colors-brand-inverted: (
  'lime': rgba(232,246,223,1),
  'green': rgba(221,243,226,1),
  'teal': rgba(229,246,242,1),
  'sky': rgba(230,244,250,1),
  'blue': rgba(225,237,253,1),
  'indigo': rgba(232,224,252,1),
  'purple': rgba(240,228,246,1),
  'pink': rgba(248,225,228,1),
  'brown': rgba(239,222,216,1),
  'red': rgba(250,217,214,1),
  'orange': rgba(254,232,200,1),
  'yellow': rgba(254,241,200,1)
);
$colors-brand-inverted-global: (
  'primary': map-global-collect($colors-brand-inverted, 'primary'),
  'secondary': map-global-collect($colors-brand-inverted, 'secondary'),
  'tertiary': map-global-collect($colors-brand-inverted, 'tertiary'),
  'quaditiary': map-global-collect($colors-brand-inverted, 'quaditiary')
);
$colors-grayscale: (
  'light-black': rgba(58,67,84,1),
  'black': rgba(44,53,70,1),
  'dark-black': rgba(30,39,55,1),
  'light-gray': rgba(152,166,184,1),
  'gray': rgba(138,152,170,1),
  'dark-gray': rgba(124,138,156,1),
  'light-haze': rgba(248,249,253,1),
  'haze': rgba(238,241,250,1),
  'dark-haze': rgba(229,234,244,1),
  'white': rgba(255,255,255,1),
  'transparent': rgba(0,0,0,0)
);
$colors: map-collect($colors-brand, $colors-brand-global, $colors-grayscale);
$colors-inversions: map-collect($colors-brand-inverted, $colors-brand-inverted-global);
$colors-black-text: 'transparent', 'dark-haze', 'haze', 'light-haze', 'white';

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

// Font
// ==================================================
$font-available-typography: (
  branding: 'Branding',
  fakt-pro: 'Fakt Pro',
  fakt-soft-pro: 'Fakt Soft Pro',
  tiempos-headline: 'Tiempos Headline',
  ventura-edding: 'Ventura Edding'
);
$font-available-icons: (
  active-icons: 'Active Icons',
  dripicons: 'Dripicons'
);
$font-families: (
  display: ('Ventura Edding', Verdana, Tahoma, sans-serif),
  monospace: (Courier, Consolas, Menlo, Monaco, monospace),
  sans-serif: ('Fakt Soft Pro', Verdana, Tahoma, sans-serif),
  serif: ('Tiempos Headline', Georgia, 'Times New Roman', serif)
);
$font-icon: 'Active Icons';
$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
);