$UI.media = {
  mobile: 480px,
  tablet: 768px,
  desktop: 1024px,
  wide: 1280px
}

$UI.gutters = {
  xs: 0.5u,
  s: 1u,
  m: 2u,
  l: 3u,
  xl: 4u,
  xxl: 5u
}

$UI.fontFamilies = {
  web: {
    normal: "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', sans-serif",
    heading: "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', sans-serif"
  },
  android: {
    normal: 'System',
    heading: 'System'
  },
  ios: {
    normal: 'System',
    heading: 'System'
  }
}

$UI.fontWeights = {
  normal: 400,
  normalBold: 600,
  heading: 400,
  headingBold: 600
}

$UI.fontSizes = {
  xs: 1.25u, // DEPRECATED
  s: 1.5u, // DEPRECATED
  m: 1.75u, // DEPRECATED
  l: 2u, // DEPRECATED
  xl: 2.5u, // DEPRECATED
  xxl: 3u, // DEPRECATED
  xxxl: 4.5u, // DEPRECATED
  xxxxl: 6u, // DEPRECATED
  xxxxxl: 9u, // DEPRECATED
  h1: 9u,
  h2: 6u,
  h3: 4.5u,
  h4: 3u,
  h5: 2.5u,
  h6: 2u,
  description: 1.75u, // DEPRECATED
  body1: 2u,
  body2: 1.75u,
  caption: 1.5u
}

$UI.lineHeights = {
  xs: 1.75u, // DEPRECATED
  s: 2u, // DEPRECATED
  m: 2.5u, // DEPRECATED
  l: 3u, // DEPRECATED
  xl: 3.5u, // DEPRECATED
  xxl: 4u, // DEPRECATED
  xxxl: 6u, // DEPRECATED
  xxxxl: 8u, // DEPRECATED
  xxxxxl: 12u, // DEPRECATED
  h1: 12u,
  h2: 8u,
  h3: 6u,
  h4: 4u,
  h5: 3.5u,
  h6: 3u,
  description: 2.5u, // DEPRECATED
  body1: 3u,
  body2: 2.5u,
  caption: 2u
}

$UI.borderRadius = {
  m: 4px,
  l: 8px,
  circle: 9999px
}