@import url('./normalize.css');
@import url('./globalStyles.css');

@import url('./colors.css');
@import url('./sizing.css');
@import url('./spacing.css');
@import url('./typography.css');
@import url('./breakpoints.css');
@import url('./elevation.css');
@import url('./shadows.css');
@import url('./globalTokens.css');

/* 

We are importing all of our individual CSS variable declarations above. If you are not using any of the variables from a given stylesheet (say, breakpoints or elevation), you can feel free to omit them. You should, at a minimum, implement the normalize.css and globalStyles.css sheets.

*/

.box {
  width: 100%;
  padding: var(--spacingLayout3x);
  border: var(--sizeBorderWidthThick) solid var(--interactive);
  border-radius: var(--sizeBorderRadius);
  box-shadow: var(--shadow2);
}

.altBox {
  width: 100%;
  padding: var(--spacingLayout3x);
  border-radius: var(--sizeBorderRadius);
  box-shadow: var(--shadow2);
  background: var(--greenLight15);
  color: var(--textPrimaryInverse);
  margin-top: var(--spacing2x);
}

.token-section {
  margin-top: var(--spacing2x);
  padding: var(--spacing2x);
  background: var(--grayLight90);
}

.token-section > div {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.token-section h3 {
  margin-bottom: var(--spacing0_5x);
  width: 100%;
  text-align: center;
  align-self: center;
}

.section {
  margin: var(--spacing6x) 0;
}