chef-typography {
  display: block;
  padding: 1rem;

  h3,
  h4,
  p {
    display: block;
    max-width: 40rem;
    width: 100%;
  }

  .chef-card-item {
    margin-bottom: 2rem;
    background-color: var(--chef-white);
    border-radius: var(--chef-border-radius);
    box-shadow: var(--chef-box-shadow);
  }

  .chef-color-swatch {
    display: block;
    height: 2rem;
    width: 100%;
    border-radius: var(--chef-border-radius)  var(--chef-border-radius) 0 0;
  }

  .chef-card-info {
    padding: 1rem;

    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    li {
      font-size: .75rem;
      color: var(--chef-dark-grey);
    }

    span {
      font-size: .875rem;
    }
  }

  //Font-size helpers
  .chef-font-lg {
    font-size: 1rem;
  }

  .chef-font-sm {
    font-size: .75rem;
  }

  //Primary colors
  .chef-primary {
    background-color: var(--chef-primary);
  }

  .chef-primary-dark {
    background-color: var(--chef-primary-dark);
  }

  .chef-primary-bright {
    background-color: var(--chef-primary-bright);
  }

  .chef-primary-light {
    background-color: var(--chef-primary-light);
  }

  //Secondary colors
  .chef-critical {
    background-color: var(--chef-critical);
  }

  .chef-major {
    background-color: var(--chef-major);
  }

  .chef-minor {
    background-color: var(--chef-minor);
  }

  .chef-success {
    background-color: var(--chef-success);
  }

  //Grayscale colors
  .chef-dark-grey {
    background-color: var(--chef-dark-grey);
  }

  .chef-grey {
    background-color: var(--chef-grey);
  }

  .chef-light-grey {
    background-color: var(--chef-light-grey);
  }

  .chef-lightest-grey {
    background-color: var(--chef-lightest-grey);
  }

  .chef-white {
    background-color: var(--chef-white);
  }

  .chef-black {
    background-color: var(--chef-black);
  }

  //Font colors
  .chef-text-base {
    color: var(--chef-primary-dark);
  }

  .chef-text-dull {
    color: var(--chef-dark-grey);
  }

  .chef-text-active {
    color: var(--chef-primary-bright);
  }

  .chef-text-contrast {
    color: var(--chef-white);
  }
}