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

// Options
// ==================================================
$pseudo-elements: true;

// 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-base: (
  'black': rgba(16,37,51,1),
  'steel': rgba(51,71,102,1),
  'white': rgba(255,255,255,1),
  'transparent': rgba(0,0,0,0)
);
$colors-grayscale: (
  'light-slate': rgba(40,63,92,1),
  'slate': rgba(34,54,78,1),
  'dark-slate': rgba(28,45,64,1),
  'light-gray': rgba(171,189,212,1),
  'gray': rgba(158,179,205,1),
  'dark-gray': rgba(145,169,198,1),
  'light-haze': rgba(246,248,252,1),
  'haze': rgba(234,239,250,1),
  'dark-haze': rgba(223,230,246,1)
);
$colors-brand: (
  'lime': rgba(171,189,49,1),
  'green': rgba(72,197,54,1),
  'teal': rgba(39,196,144,1),
  'sky': rgba(45,166,255,1),
  'blue': rgba(0,123,255,1),
  'indigo': rgba(134,96,254,1),
  'purple': rgba(187,100,250,1),
  'brown': rgba(128,88,78,1),
  'pink': rgba(245,112,129,1),
  'red': rgba(239,46,67,1),
  'orange': rgba(247,115,55,1),
  'yellow': rgba(245,200,40,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-collect($colors-base, $colors-grayscale, $colors-brand, $colors-global);
$colors-text-alt: 'transparent', 'dark-haze', 'haze', 'light-haze', 'white';

// Common
// ==================================================
$common-border-widths: (
  xxxl: 8px,
  xxl: 6px,
  xl: 4px,
  l: 3px,
  m: 2px,
  b: 1px,
  n: 0
);
$common-border-radiuses: (
  xxl: 999px,
  xl: 14px,
  l: 10px,
  m: 6px,
  b: 4px,
  s: 2px,
  n: 0
);
$common-box-shadows: (
  xxl: 14px,
  xl: 10px,
  l: 8px,
  m: 6px,
  b: 4px,
  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-border-styles: dashed, dotted, double, none, solid;
$common-display-types: block, inline, inline-block, none, table, table-cell, table-row;
$common-visibility-types: collapse, hidden, visible;

// Font
// ==================================================
$font-available-typography: (
  circular: 'Circular',
  tiempos-headline: 'Tiempos Headline'
);
$font-families: (
  display: (Impact, Verdana, Tahoma, '-apple-system', BlinkMacSystemFont, 'Segoe UI', sans-serif),
  monospace: (Courier, 'Courier New', 'Lucida Sans Typewriter', 'Ubuntu Mono', Consolas, Menlo, Monaco, monospace),
  sans-serif: ('Circular', '-apple-system', BlinkMacSystemFont, 'Segoe UI', Verdana, Tahoma, sans-serif),
  serif: ('Tiempos Headline', Georgia, 'Times New Roman', Times, serif)
);
$font-indents: (
  xxxl: 45px,
  xxl: 30px,
  xl: 15px,
  l: 10px,
  m: 5px,
  b: 0,
  s: -5px,
  xs: -10px,
  xxs: -15px,
  xxxs: -30px
);
$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.4px,
  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), 813px),
  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
);