:root {
  /* Low-level variables */
  /* Do not use outside of this document */

  /* Predefined units based on an exponential scale of --unit-ratio */
  --unit-ratio: 1.125;
  --unit-large-12: calc(
    var(--unit-normal) * var(--unit-ratio) * var(--unit-ratio) *
      var(--unit-ratio) * var(--unit-ratio) * var(--unit-ratio) *
      var(--unit-ratio) * var(--unit-ratio) * var(--unit-ratio) *
      var(--unit-ratio) * var(--unit-ratio) * var(--unit-ratio) *
      var(--unit-ratio)
  );
  --unit-large-11: calc(
    var(--unit-normal) * var(--unit-ratio) * var(--unit-ratio) *
      var(--unit-ratio) * var(--unit-ratio) * var(--unit-ratio) *
      var(--unit-ratio) * var(--unit-ratio) * var(--unit-ratio) *
      var(--unit-ratio) * var(--unit-ratio) * var(--unit-ratio)
  );
  --unit-large-10: calc(
    var(--unit-normal) * var(--unit-ratio) * var(--unit-ratio) *
      var(--unit-ratio) * var(--unit-ratio) * var(--unit-ratio) *
      var(--unit-ratio) * var(--unit-ratio) * var(--unit-ratio) *
      var(--unit-ratio) * var(--unit-ratio)
  );
  --unit-large-9: calc(
    var(--unit-normal) * var(--unit-ratio) * var(--unit-ratio) *
      var(--unit-ratio) * var(--unit-ratio) * var(--unit-ratio) *
      var(--unit-ratio) * var(--unit-ratio) * var(--unit-ratio) *
      var(--unit-ratio)
  );
  --unit-large-8: calc(
    var(--unit-normal) * var(--unit-ratio) * var(--unit-ratio) *
      var(--unit-ratio) * var(--unit-ratio) * var(--unit-ratio) *
      var(--unit-ratio) * var(--unit-ratio) * var(--unit-ratio)
  );
  --unit-large-7: calc(
    var(--unit-normal) * var(--unit-ratio) * var(--unit-ratio) *
      var(--unit-ratio) * var(--unit-ratio) * var(--unit-ratio) *
      var(--unit-ratio) * var(--unit-ratio)
  );
  --unit-large-6: calc(
    var(--unit-normal) * var(--unit-ratio) * var(--unit-ratio) *
      var(--unit-ratio) * var(--unit-ratio) * var(--unit-ratio) *
      var(--unit-ratio)
  );
  --unit-large-5: calc(
    var(--unit-normal) * var(--unit-ratio) * var(--unit-ratio) *
      var(--unit-ratio) * var(--unit-ratio) * var(--unit-ratio)
  );
  --unit-large-4: calc(
    var(--unit-normal) * var(--unit-ratio) * var(--unit-ratio) *
      var(--unit-ratio) * var(--unit-ratio)
  );
  --unit-large-3: calc(
    var(--unit-normal) * var(--unit-ratio) * var(--unit-ratio) *
      var(--unit-ratio)
  );
  --unit-large-2: calc(
    var(--unit-normal) * var(--unit-ratio) * var(--unit-ratio)
  );
  --unit-large: calc(var(--unit-normal) * var(--unit-ratio));
  --unit-normal: 16px;
  --unit-small: calc(var(--unit-normal) / var(--unit-ratio));
  --unit-small-2: calc(
    var(--unit-normal) / var(--unit-ratio) / var(--unit-ratio)
  );
  --unit-small-3: calc(
    var(--unit-normal) / var(--unit-ratio) / var(--unit-ratio) /
      var(--unit-ratio)
  );
  --unit-small-4: calc(
    var(--unit-normal) / var(--unit-ratio) / var(--unit-ratio) /
      var(--unit-ratio) / var(--unit-ratio)
  );
  --unit-small-5: calc(
    var(--unit-normal) / var(--unit-ratio) / var(--unit-ratio) /
      var(--unit-ratio) / var(--unit-ratio) / var(--unit-ratio)
  );
  --unit-small-6: calc(
    var(--unit-normal) / var(--unit-ratio) / var(--unit-ratio) /
      var(--unit-ratio) / var(--unit-ratio) / var(--unit-ratio) /
      var(--unit-ratio)
  );
  --unit-small-7: calc(
    var(--unit-normal) / var(--unit-ratio) / var(--unit-ratio) /
      var(--unit-ratio) / var(--unit-ratio) / var(--unit-ratio) /
      var(--unit-ratio) / var(--unit-ratio)
  );
  --unit-small-8: calc(
    var(--unit-normal) / var(--unit-ratio) / var(--unit-ratio) /
      var(--unit-ratio) / var(--unit-ratio) / var(--unit-ratio) /
      var(--unit-ratio) / var(--unit-ratio) / var(--unit-ratio)
  );
  --unit-small-9: calc(
    var(--unit-normal) / var(--unit-ratio) / var(--unit-ratio) /
      var(--unit-ratio) / var(--unit-ratio) / var(--unit-ratio) /
      var(--unit-ratio) / var(--unit-ratio) / var(--unit-ratio) /
      var(--unit-ratio)
  );
  --unit-small-10: calc(
    var(--unit-normal) / var(--unit-ratio) / var(--unit-ratio) /
      var(--unit-ratio) / var(--unit-ratio) / var(--unit-ratio) /
      var(--unit-ratio) / var(--unit-ratio) / var(--unit-ratio) /
      var(--unit-ratio) / var(--unit-ratio)
  );
  --unit-small-11: calc(
    var(--unit-normal) / var(--unit-ratio) / var(--unit-ratio) /
      var(--unit-ratio) / var(--unit-ratio) / var(--unit-ratio) /
      var(--unit-ratio) / var(--unit-ratio) / var(--unit-ratio) /
      var(--unit-ratio) / var(--unit-ratio) / var(--unit-ratio)
  );
  --unit-small-12: calc(
    var(--unit-normal) / var(--unit-ratio) / var(--unit-ratio) /
      var(--unit-ratio) / var(--unit-ratio) / var(--unit-ratio) /
      var(--unit-ratio) / var(--unit-ratio) / var(--unit-ratio) /
      var(--unit-ratio) / var(--unit-ratio) / var(--unit-ratio) /
      var(--unit-ratio)
  );
  --unit-hairline: 1px;
  --unit-thin: 2px;

  /* Font and type basics */
  --font-stack-marrufo: sans-serif;

  /* Named colors */
  --color-white: white;

  /* --color-red-50: #fcf7f7; */
  --color-red-100: #f8f4f4;
  --color-red-200: #fff0ef;
  --color-red-300: #ffd9d6; /*marrufo accent*/
  --color-red-400: #f8b5af;
  --color-red-500: #ff7569;
  --color-red-600: #d5474e; /* marrufo brand */
  --color-red-700: #cd3038;
  --color-red-800: #aa1219;
  --color-red-900: #480c07;
  --color-red-950: #270401;

  --color-gray-50: #f8f8f8;
  --color-gray-100: #f2f2f2;
  --color-gray-200: #e3e3e3;
  --color-gray-300: #d9d8d8;
  --color-gray-400: #c6c6c6;
  --color-gray-500: #9a9a9a;
  --color-gray-600: #767676;
  --color-gray-700: #585858;
  --color-gray-800: #3e3e3e;
  --color-gray-900: #212121;
  --color-gray-950: #121212;

  --color-green-100: #f9fff1;
  --color-green-200: #e6efda;
  --color-green-300: #d6e2c5;
  --color-green-400: #b5c1a5;
  --color-green-500: #96a383;
}

:root {
  /* High-level variables */
  /* These are meant to be used in the normal stylesheet */

  /* Typography */
  --line-height-large: 1.333;
  --line-height-normal: 1.233;
  --line-height-small: 1.166;

  --font-size-large-5: var(--unit-large-7);
  --font-size-large-4: var(--unit-large-5);
  --font-size-large-3: var(--unit-large-3);
  --font-size-large-2: var(--unit-large-2);
  --font-size-large: var(--unit-large);
  --font-size-normal: var(--unit-normal);
  --font-size-small: var(--unit-small);
  --font-size-small-2: var(--unit-small-2);

  --font-stack-primary: var(--font-stack-marrufo);

  /* Colors */
  --color-text: var(--color-red-800);
  --color-text-muted: var(--color-gray-500);
  --color-text-highlighted: var(--color-red-600);
  --color-text-light: var(--color-gray-300);
  --color-text-dark: var(--color-gray-900);
  --color-text-inverted: var(--color-gray-100);
  --color-border: var(--color-red-400);
  --color-border-muted: var(--color-green-400);
  --color-background: var(--color-green-300);
  --color-background-contrast: var(--color-gray-200);
  --color-background-inverted: var(--color-gray-900);
  --color-link: var(--color-red-600);
  --color-link-hover: var(--color-red-500);
  --color-link-active: var(--color-red-700);
  --color-link-border: var(--color-red-400);
  --color-link-border-hover: var(--color-red-600);
  --color-link-border-active: var(--color-gray-700);
  --color-link-inverted: var(--color-white);
  --color-link-inverted-hover: var(--color-red-100);
  --color-link-inverted-active: var(--color-white);
  --color-link-inverted-border: var(--color-red-500);
  --color-link-inverted-background: var(--color-red-500);
  --color-link-inverted-background-inverted: var(--color-red-600);
  --color-notice-background: var(--color-red-200);
  --color-image-background: var(--color-gray-900);
  --color-hero-background: var(--color-red-600);

  /* Spacing */
  --spacing-horizontal-large-5: var(--unit-large-12);
  --spacing-horizontal-large-4: var(--unit-large-10);
  --spacing-horizontal-large-3: var(--unit-large-6);
  --spacing-horizontal-large-2: var(--unit-large-4);
  --spacing-horizontal-large: var(--unit-large);
  --spacing-horizontal: var(--unit-small);
  --spacing-horizontal-small: var(--unit-small-3);
  --spacing-horizontal-small-2: var(--unit-small-6);
  --spacing-horizontal-small-3: var(--unit-small-8);
  --spacing-horizontal-small-4: var(--unit-small-10);
  --spacing-horizontal-small-5: var(--unit-small-12);

  --spacing-vertical-large-5: var(--unit-large-12);
  --spacing-vertical-large-4: var(--unit-large-10);
  --spacing-vertical-large-3: var(--unit-large-6);
  --spacing-vertical-large-2: var(--unit-large-4);
  --spacing-vertical-large: var(--unit-large);
  --spacing-vertical: var(--unit-small);
  --spacing-vertical-small: var(--unit-small-3);
  --spacing-vertical-small-2: var(--unit-small-6);
  --spacing-vertical-small-3: var(--unit-small-8);
  --spacing-vertical-small-4: var(--unit-small-10);
  --spacing-vertical-small-5: var(--unit-small-12);

  /* Borders */
  --border-width-normal: var(--unit-hairline);
  --border-width-large: var(--unit-thin);

  --border-radius-small-2: var(--unit-small-12);
  --border-radius-small: var(--unit-small-6);
  --border-radius: var(--unit-small-3);
  --border-radius-large: var(--unit-large);
  --border-radius-large-2: var(--unit-large-4);
}

/* Utility classes */
/* Typography */

.text-block-heading {
  font-size: var(--font-size-large-3);
  line-height: var(--line-height-small);
  font-weight: 400;
  color: var(--color-text-dark);
}

.text-block-subhead {
  font-size: var(--font-size-large);
  line-height: var(--line-height-small);
  font-weight: 400;
}

.text-block-normal {
  font-size: var(--font-size-normal);
  line-height: var(--line-height-normal);
}

.text-block-small {
  font-size: var(--font-size-small);
  line-height: var(--line-height-large);
}

.text-inline-code {
  font-size: 0.8em;
  background: var(--color-text-light);
}

@media (min-width: 30em) {
  :root {
    --unit-normal: 18px;
  }
}

@media (min-width: 50em) {
  :root {
    --unit-normal: 20px;
  }
}

@media (min-width: 70em) {
  :root {
    --unit-normal: 22px;
  }
}