$breakpoints: (
  'ns': 'screen and (min-width: 30em)',
);

// @ border-colors
$colors: (
  'black-0': #000,
  'black-1': #111,
  'black-2':#333,
  'black-3':#555,
  'white-0': #fff,
  'white-1': #f4f4f4,
  'white-2': #eee,
  'white-3': #fff,
  'transparent': transparent,
  'black-90': rgba(0, 0, 0, 0.9),
  'black-80': rgba(0, 0, 0, 0.8),
  'black-70': rgba(0, 0, 0, 0.7),
  'black-60': rgba(0, 0, 0, 0.6),
  'black-50': rgba(0, 0, 0, 0.5),
  'black-40': rgba(0, 0, 0, 0.4),
  'black-30': rgba(0, 0, 0, 0.3),
  'black-20': rgba(0, 0, 0, 0.2),
  'black-10': rgba(0, 0, 0, 0.1),
  'white-90': rgba(255, 255, 255, 0.9),
  'white-80': rgba(255, 255, 255, 0.8),
  'white-70': rgba(255, 255, 255, 0.7),
  'white-60': rgba(255, 255, 255, 0.6),
  'white-50': rgba(255, 255, 255, 0.5),
  'white-40': rgba(255, 255, 255, 0.4),
  'white-30': rgba(255, 255, 255, 0.3),
  'white-20': rgba(255, 255, 255, 0.2),
  'white-10': rgba(255, 255, 255, 0.1),
);

// @ width, max-width, heights
$linear-scale: (
  '0': 1rem,
  '1': 2rem,
  '2': 4rem,
  '3': 8rem,
  '4': 16rem,
  '5': 32rem,
  '6': 48rem,
  '7': 64rem,
  '8': 96rem
);

// Perfect fourth
// @ _type_scale
$type-scale: (
  '-1': 0.875rem,
  '0': 1rem,
  '1': 1.25rem,
  '2': 1.5rem,
  '3': 2.25rem,
  '4': 3rem,
  '5': 5rem,
);

// < 1: Perfect fourth 1.25 || > 0: Golden ratio 1.618
// @ spacing
$scale: (
  'n': 0,
  '-5': 0.328rem,
  '-4': 0.41rem,
  '-3': 0.512rem,
  '-2': 0.64rem,
  '-1': 0.8rem,
  '0': 1rem,
  '1': 1.618rem,
  '2': 2.618rem,
  '3': 4.236rem,
  '4': 6.854rem,
  '5': 11.089rem
);