section {
  max-width: 960px;
  padding: var(--x-margin-large);
  box-sizing: border-box;
}

header {
  padding: 0 0 var(--x-margin-xsmall) 0;
  margin: 0 0 var(--x-margin-large) 0;
  border-bottom: var(--x-default-border-width) solid var(--x-swatch-gray-500);
}

header,
#typography-display {
  font: var(--x-display-font);
  letter-spacing: var(--x-display-letter-spacing);
}

#typography-headline {
  font: var(--x-headline-font);
  letter-spacing: var(--x-headline-letter-spacing);
}

#typography-heading {
  font: var(--x-heading-font);
  letter-spacing: var(--x-heading-letter-spacing);
}

#typography-subheading {
  font: var(--x-subheading-font);
  letter-spacing: var(--x-subheading-letter-spacing);
}

#typography-body1 {
  font: var(--x-body1-font);
  letter-spacing: var(--x-body1-letter-spacing);
}

#typography-body2 {
  font: var(--x-body2-font);
  letter-spacing: var(--x-body2-letter-spacing);
}

#typography-caption {
  font: var(--x-caption-font);
  letter-spacing: var(--x-caption-letter-spacing);
}

#typography-mono {
  font-family: var(--x-monospace-font-family);
}

/* SWATCHES */

.swatch-group {
  margin: var(--x-margin-large) 0;
}

#swatch-gray-050 {
  color: var(--x-swatch-gray-050);
}

#swatch-gray-100 {
  color: var(--x-swatch-gray-100);
}

#swatch-gray-200 {
  color: var(--x-swatch-gray-200);
}

#swatch-gray-300 {
  color: var(--x-swatch-gray-300);
}

#swatch-gray-400 {
  color: var(--x-swatch-gray-400);
}

#swatch-gray-500 {
  color: var(--x-swatch-gray-500);
}

#swatch-gray-600 {
  color: var(--x-swatch-gray-600);
}

#swatch-gray-700 {
  color: var(--x-swatch-gray-700);
}

#swatch-gray-800 {
  color: var(--x-swatch-gray-800);
}

#swatch-gray-900 {
  color: var(--x-swatch-gray-900);
}

#swatch-gray-950 {
  color: var(--x-swatch-gray-950);
}

#swatch-white {
  color: var(--x-swatch-white);
}

#swatch-black {
  color: var(--x-swatch-black);
}

#swatch-cyan {
  color: var(--x-swatch-cyan);
}

#swatch-magenta {
  color: var(--x-swatch-magenta);
}

#swatch-yellow {
  color: var(--x-swatch-yellow);
}

#swatch-red {
  color: var(--x-swatch-red);
}

#swatch-darkred {
  color: var(--x-swatch-darkred);
}

#swatch-green {
  color: var(--x-swatch-green);
}

#swatch-darkgreen {
  color: var(--x-swatch-darkgreen);
}

#swatch-blue {
  color: var(--x-swatch-blue);
}

#swatch-darkblue {
  color: var(--x-swatch-darkblue);
}

#swatch-orange {
  color: var(--x-swatch-orange);
}

#swatch-darkorange {
  color: var(--x-swatch-darkorange);
}

#swatch-olive {
  color: var(--x-swatch-olive);
}

#icon-group {
  display: flex;
}

#icon-xsmall,
#icon-small,
#icon-medium,
#icon-large,
#icon-xlarge {
  flex-shrink: 0;
  margin: var(--x-margin-small);
  background-color: var(--x-swatch-gray-500);
}

#icon-xsmall {
  width: var(--x-icon-xsmall);
  height: var(--x-icon-xsmall);
}

#icon-small {
  width: var(--x-icon-small);
  height: var(--x-icon-small);
}

#icon-medium {
  width: var(--x-icon-medium);
  height: var(--x-icon-medium);
}

#icon-large {
  width: var(--x-icon-large);
  height: var(--x-icon-large);
}

#icon-xlarge {
  width: var(--x-icon-xlarge);
  height: var(--x-icon-xlarge);
}

#margin-group {
  display: flex;
}

#margin-xsmall,
#margin-small,
#margin-medium,
#margin-large,
#margin-xlarge,
#margin-xxlarge {
  width: 136px;
  height: 136px;
  flex-shrink: 0;
  box-sizing: border-box;
  margin: var(--x-margin-medium) var(--x-margin-xsmall) var(--x-margin-medium) 0;
  border-style: solid;
  border-color: var(--x-swatch-gray-500);
}

#margin-xxsmall {
  border-width: var(--x-margin-xxsmall);
}

#margin-xsmall {
  border-width: var(--x-margin-xsmall);
}

#margin-small {
  border-width: var(--x-margin-small);
}

#margin-medium {
  border-width: var(--x-margin-medium);
}

#margin-large {
  border-width: var(--x-margin-large);
}

#margin-xlarge {
  border-width: var(--x-margin-xlarge);
}

#margin-xxlarge {
  border-width: var(--x-margin-xxlarge);
}

input,
textarea,
button {
  /* note: these properties do not cascade to inputs */
  font-family: var(--x-default-font-family);
  text-rendering: optimizeLegibility;
  color: var(--x-default-text-color);
  background-color: var(--x-swatch-black);
}

input,
textarea {
  font-size: var(--x-input-font-size);
  font-weight: var(--x-input-font-weight);
  line-height: var(--x-input-line-height);
  letter-spacing: var(--x-input-letter-spacing);
}

textarea {
  margin: var(--x-margin-xsmall) 0 0 0;
}

button {
  font-size: var(--x-button-font-size);
  font-weight: var(--x-button-font-weight);
  line-height: var(--x-button-line-height);
  letter-spacing: var(--x-button-letter-spacing);
  text-transform: uppercase;
}