@use 'tokens';
@use 'sass:map';

/**
 * SIZE SCALE
 * This is a Major Third scale that powers all the utilities that
 * it is relevant for (font-size, margin, padding). All items are
 * calcuated off these tokens.
 */
$size-scale: map.get(tokens.$tokens, 'size-scale');

/**
 * COLORS
 * Colors are shared between backgrounds and text by default. 
 * You can also use them to power borders, fills or shadows, for example.
 */
$colors: map.get(tokens.$tokens, 'colors');

/**
 * METRICS
 * Various misc metrics to use around the site
 */
$metrics: (
  'wrap-max-width': 71.25rem,
  'wrap-inner-max-width': 47rem,
  'md-breakpoint': 48rem
);