:root {

  /* ---------------- SPACING SCALE ---------------- */

  /**
   *
   * 1) Set the "sm" value relative to
   * our base spacing unit
   *
   * 2) Backtrack initially to set values
   * less than "sm"
   *
   * 3) Move forward on the scale, deriving each
   * new value from the product of the previous
   * setting and the common ratio
   */

  /* 1 */

  /* 2 */

  /* 3 */


  /* ---------------- CONCEPTUAL VARIABLES ---------------- */

  /**
   * INSETS
   *
   * 1) Squared indent spacing: Compresses content on all four sides
   * (think of the inner framing for a photo on the wall)
   *
   * 2) Squished indent spacing: Reduces top and bottom space by 50%.
   * Useful for buttons and cell-like containers such
   * as a data table row or a list item.
   *
   * 3) Stretched indent spacing: Extra vertical spacing.
   * Useful for elements whose size is prown to grown vertically (such
   * as a textarea) or elements that are commonly blocks in a
   * vertical flow (such as text field for any other form element)
   */

  /* 1 */

  /* 2 */

  /* 3 */

  /**
   * STACKING
   *
   * Helpers for the different spacing values comprising
   * that comprise a vertical rythm: stacked copy, stacked
   * pills, stacked toolbars, stacked headings on form fields, etc.
   */
}

.o-box > :last-child,
[class^="o-box--"],
[class*=" o-box--"] {
  margin-bottom: 0;
}

.o-box--flush {
  padding: 0;
}

/* ---- BOXES WITH INSET SPACING ------ */

.o-box--inset-xs {
  padding: 4px 4px 4px 4px;
  padding: 0.25rem 0.25rem 0.25rem 0.25rem;
}

.o-box--inset-sm {
  padding: 8px 8px 8px 8px;
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
}

.o-box--inset-md {
  padding: 16px 16px 16px 16px;
  padding: 1rem 1rem 1rem 1rem;
}

.o-box--inset-lg {
  padding: 32px 32px 32px 32px;
  padding: 2rem 2rem 2rem 2rem;
}

.o-box--inset-xl {
  padding: 64px 64px 64px 64px;
  padding: 4rem 4rem 4rem 4rem;
}

/* ---- BOXES WITH INSET SQUISH SPACING ------ */

.o-box--inset-squish-sm {
  padding: 4px     8px     4px     8px;
  padding: 0.25rem     0.5rem     0.25rem     0.5rem;
}

.o-box--inset-squish-md {
  padding: 8px     16px     8px     16px;
  padding: 0.5rem     1rem     0.5rem     1rem;
}

.o-box--inset-squish-lg {
  padding: 16px     32px     16px     32px;
  padding: 1rem     2rem     1rem     2rem;
}

/* ---- BOXES WITH INSET STRETCH SPACING ------ */

.o-box--inset-stretch-sm {
  padding: 12px     8px     12px     8px;
  padding: 0.75rem     0.5rem     0.75rem     0.5rem;
}

.o-box--inset-stretch-md {
  padding: 24px     16px     24px     16px;
  padding: 1.5rem     1rem     1.5rem     1rem;
}

/* ---- STACKED BOXES ------ */

.o-box--stacked-xs {
  padding: 0 0 4px 0;
  padding: 0 0 0.25rem 0;
}

.o-box--stacked-sm {
  padding: 0 0 8px 0;
  padding: 0 0 0.5rem 0;
}

.o-box--stacked-md {
  padding: 0 0 16px 0;
  padding: 0 0 1rem 0;
}

.o-box--stacked-lg {
  padding: 0 0 32px 0;
  padding: 0 0 2rem 0;
}

.o-box--stacked-xl {
  padding: 0 0 64px 0;
  padding: 0 0 4rem 0;
}