:root {
  --base-font-size: 16px;
  --base-font-size: 1rem;

  --base-line-height: 1.5;

  --base-border-radius: 0.125em;

  --base-spacing-unit: 16px;
  --base-spacing-unit: 1rem;
}

:root {

  --common-ratio: 2;

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

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

  /* 1 */

  --spacing-md: 16px;
  --spacing-md: 1rem;

  /* 2 */

  --spacing-xs: 4px;
  --spacing-xs: 0.25rem;

  --spacing-sm: 8px;
  --spacing-sm: 0.5rem;

  /* 3 */

  --spacing-lg: 32px;
  --spacing-lg: 2rem;

  --spacing-xl: 64px;
  --spacing-xl: 4rem;

  --spacing-xxl: 128px;
  --spacing-xxl: 8rem;


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

  --spacing-inset-default: 16px 16px 16px 16px;
  --spacing-inset-default: 1rem 1rem 1rem 1rem;

  /**
   * 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 */

  --spacing-inset-xs: 4px 4px 4px 4px;
  --spacing-inset-xs: 0.25rem 0.25rem 0.25rem 0.25rem;
  --spacing-inset-sm: 8px 8px 8px 8px;
  --spacing-inset-sm: 0.5rem 0.5rem 0.5rem 0.5rem;
  --spacing-inset-md: 16px 16px 16px 16px;
  --spacing-inset-md: 1rem 1rem 1rem 1rem;
  --spacing-inset-lg: 32px 32px 32px 32px;
  --spacing-inset-lg: 2rem 2rem 2rem 2rem;
  --spacing-inset-xl: 64px 64px 64px 64px;
  --spacing-inset-xl: 4rem 4rem 4rem 4rem;

  /* 2 */

  --spacing-inset-squish-sm: 4px     8px     4px     8px;
  --spacing-inset-squish-sm: 0.25rem     0.5rem     0.25rem     0.5rem;

  --spacing-inset-squish-md: 8px     16px     8px     16px;
  --spacing-inset-squish-md: 0.5rem     1rem     0.5rem     1rem;

  --spacing-inset-squish-lg: 16px     32px     16px     32px;
  --spacing-inset-squish-lg: 1rem     2rem     1rem     2rem;

  /* 3 */

  --spacing-inset-stretch-sm: 12px     8px     12px     8px;
  --spacing-inset-stretch-sm: 0.75rem     0.5rem     0.75rem     0.5rem;

  --spacing-inset-stretch-md: 24px     16px     24px     16px;
  --spacing-inset-stretch-md: 1.5rem     1rem     1.5rem     1rem;

  /**
   * 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.
   */
  --spacing-stack-xs: 0 0 4px 0;
  --spacing-stack-xs: 0 0 0.25rem 0;
  --spacing-stack-sm: 0 0 8px 0;
  --spacing-stack-sm: 0 0 0.5rem 0;
  --spacing-stack-md: 0 0 16px 0;
  --spacing-stack-md: 0 0 1rem 0;
  --spacing-stack-lg: 0 0 32px 0;
  --spacing-stack-lg: 0 0 2rem 0;
  --spacing-stack-xl: 0 0 64px 0;
  --spacing-stack-xl: 0 0 4rem 0;
}