_variables.scss

$media-separator:   '_' !default;
$literal-separator: '-' !default;
$ordinal-separator: '' !default;
$pseudo-separator:  '-' !default;

$media-queries: (
  null: null,
  SM: 'screen and (min-width: 576px)',
  MD: 'screen and (min-width: 768px)',
  LG: 'screen and (min-width: 992px)',
  XL: 'screen and (min-width: 1200px)',
) !default;

// Pseudo-class and pseudo-element suffixes.
$pseudos: (
  hf: (hover, focus),
  h: hover,
  f: focus,
) !default;


// Grid
// -------------
$grid-col-count: 12 !default;

$grid-gutters: (
  null: 0,
  SM:   20px,
  MD:   20px,
  LG:   20px,
  XL:   20px,
) !default;

$grid-widths: (
  null: 100%,
  SM:   540px,
  MD:   720px,
  LG:   960px,
  XL:   1140px,
) !default;


// Columns
// -------------
$col-count: $grid-col-count !default;

$col-gaps: $grid-gutters !default;


// Colors
// -------------
$palette: (
  cc: currentColor,
  tt: transparent,

  // Greyscale
  w:  #fff,
  g1: #eeeeec,
  g2: #d3d7cf,
  g3: #babdb6,
  g4: #888a85,
  g5: #555753,
  g6: #2e3436,
  b:  #000,

  // Yellow
  ly: #fce94f,
  y:  #edd400,
  dy: #c4a000,

  // Orange
  lo: #fcaf3e,
  o:  #f57900,
  do: #ce5c00,

  // Chocolate
  lc: #e9b96e,
  c:  #c17d11,
  dc: #8f5902,

  // Green
  lg: #8ae234,
  g:  #73d216,
  dg: #4e9a06,

  // Navy
  ln: #729fcf,
  n:  #3465a4,
  dn: #204a87,

  // Purple
  lp: #ad7f8a,
  p:  #75507b,
  dp: #5c3566,

  // Red
  lr: #ef2929,
  r:  #cc0000,
  dr: #a40000,

  i:  inherit,
) !default;


// Backgrounds
// -------------
$background-colors: $palette !default;


// Borders
// -------------
$border-colors: $palette !default;

$border-widths: (
  i: inherit,
  1: 1px,
) !default;

$border-radiuses: (
  i:       inherit,
  10:      10px,
  5:       5px,
  circle:  999px, // Circle
) !default;

$border-styles: (
  n:      none,
  h:      hidden,
  dt:     dotted,
  ds:     dashed,
  s:      solid,
  db:     double,
  dtds:   dot-dash,
  dtdtds: dot-dot-dash,
  w:      wave,
  g:      groove,
  r:      ridge,
  in:     inset,
  o:      outset,
  i:      inherit,
) !default;


// Text
// -------------
$colors: $palette !default;

$font-sizes: (
  // Root font size
  16: 16px,

  // Override literal values
  xs: .75rem,
  s:  .875rem,
  m:  1rem,
  l:  1.25rem,

  // Headers
  h6: 1rem,
  h5: 1.25rem,
  h4: 1.5rem,
  h3: 1.75rem,
  h2: 2rem,
  h1: 2.5rem,

  // Display
  d4: 3.5rem,
  d3: 4.5rem,
  d2: 5.5rem,
  d1: 6rem,
) !default;

$font-families: (
  ss: (-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif),
  s:  (Georgia, 'Times New Roman', Times, serif),
  m:  (Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace),
) !default;

$line-heights: (
  h: 1.1, // Headings
  t: 1.3, // Text
) !default;

$letter-spacings: (
  1: 1px,
  3: 3px,
) !default;

$text-indents: () !default;

$text-decorations: (
  u:  underline,
  n:  none,
  o:  overline,
  lt: line-through,
) !default;


// Spacings
// -------------
$margins: (
  5:  5px,
  10: 10px,
  15: 15px,
  20: 20px,
  40: 40px,
) !default;

$paddings: (
  5:  5px,
  10: 10px,
  15: 15px,
  20: 20px,
  40: 40px,
) !default;


// Positions
// -------------
$positions: (
  0:    0,
  50p:  50%,
  100p: 100%,
) !default;


// Dimensions
// -------------
$widths: (
  0:    0,
  50p:  50%,
  100p: 100%,
  i:    inherit,
) !default;

$heights: (
  0:    0,
  50p:  50%,
  100p: 100%,
  i:    inherit,
) !default;

$box-shadows: () !default;